2017-10-17 2 views
0

디자인/구조의이 종류를 복제하는 것을 시도하십시오 : Notice 테이블의 1 개의 측에 2 개의 상자 및 다른 사람에 1 개 큰 것의 밑에! enter image description here 어떻게하면이 CSS를 사용하여 달성 할 수 있습니까?CSS 표 요소를 가로로 정렬하는 방법은 무엇입니까?

<body> 

<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> 
<tr> 
    <td align="center" valign="top"> 
     <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer"> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailHeader"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailBody"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td align="center" valign="top"> 
        <table border="0" cellpadding="20" cellspacing="0" width="100%" id="emailFooter"> 
         <tr> 
          <td align="center" valign="top"> 
           This is where my body content goes. 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
</table> 

</body> 

어떤 생각?

+0

내 대답 참조! 난 최선을 다 했어! –

+0

플렉스 디자인을 사용하십시오. 그것은 당신이 상당히 적은 코드로 필요한 것을 할 것입니다. – jfeferman

+0

그것이 좋다고 생각하면 내 대답을 수락 할 수 있습니까? –

답변

1

스티븐이 옳다, theory에서 : CSS를 사용하여 테이블을 중앙에

은 "올바른"방법 여기에 수직으로 적층 내 현재 코드입니다. 일치하는 브라우저는 왼쪽 여백과 오른쪽 여백이 같은 경우 테이블을 중앙에 놓아야합니다. 이 작업을 수행하는 가장 간단한 방법은 왼쪽과 오른쪽 여백을 설정하는 것입니다 따라서, 하나는 스타일 시트에 작성할 수 있습니다 "자동."

table 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 

을하지만이 답변의 시작 부분에서 언급 한 문서를 제공합니다 다른 모든 방법으로 테이블을 중앙에 놓습니다.

우아한 CSS의 크로스 브라우저 솔루션 :

div.centered 
{ 
    text-align: center; 
} 

    div.centered table 
{ 
    margin: 0 auto; 
    text-align: left; 
} 


    <div class="centered"> 
    <table> 
    … 
    </table> 
</div> 

post를 참조하십시오 : 이것은 명시적인 폭을 설정하지 않고 모두 MSIE 6 (쿼크 및 표준), 모질라, 오페라, 심지어 : Netscape 4.x를 작동

편집이 센터는 수평입니다 그냥 neciccery CSS를 변경하거나 here을 참조하십시오!

+0

왜 대담한 텍스트로 우리에게 외치는 소리를합니까? – FluffyKitten

+0

음. 죄송합니다. 굵은 글씨를 지우지 만 눈에 띄는 것이 었습니다. –

관련 문제