텍스트 정렬 센터가 인라인 블록 html 테이블에서 작동하지 않습니다.

Question

HTML 이메일을 만들고 있으며 각 nav 요소에 대해 테이블을 사용하기로 결정했습니다. 테이블을 인라인으로 표시해야합니다. 나는 display : inline-block을 사용했다; 원하는 결과를 만드는 테이블에서 테이블의 텍스트가 정렬되지 않습니다. 나는 text-align : center를 배치했다. 테이블, td 및 태그에 있지만 작동하지 않습니다.

div와 함께 작동하는 방법을 알고 있지만 테이블에 대한 해결책을 찾을 수 없습니다.

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <td align="right" valign="top"> 

     <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;"> 
      <tr> 
       <td align="center"> <a href="#" style="text-decoration: none; color: #005E82;"> 
    option 1 
    </a> 

       </td> 
      </tr> 
     </table> 

     <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966"> 
      <tr> 
       <td align="center" style="text-align:center;"> <a href="#" style="text-decoration: none; color: #005E82;"> 
    option 2 
        </a> 

       </td> 
      </tr> 
     </table> 

     <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966"> 
      <tr> 
       <td align="center"> <a href="#" style="text-decoration: none; color: #005E82; text-align:center;"> 
    option 3 
    </a> 

       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 

CSS 여기

.navInline { 
display:inline-block; 
vertical-align:top; 
text-align: center !important; } 

http://jsfiddle.net/nathanaric/pf35h/9/

Answer 1

당신은을 설정해야 작동하지 않는 코드는 표 셀의특성

예 : 나는 문제 목록을 사용하고있는 div 사용하지를 해결할 수 있었다

<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;"> 
    <tr> 
    <td align="center" width="130"><a href="#" style="text-decoration: none; color: #005E82;">option 1</a></td> 
    </tr> 

Answer 2

. 훨씬 깨끗합니다. 작동 코드는 in this JSFiddle를 찾을 수 있습니다

HTML

<ul class="navInline"> 
    <li>option1</li> 
    <li>option2</li> 
    <li>option3</li> 
    </ul> 

CSS

.navInline li { 
    display:inline-block; 
    list-style:none; 
    border: 1px solid #333; 
    padding: 5px; 
    background-color: yellow; 

}

Answer 3

내가 폭을 추가하는 방법에 대한 선택한 답에 동의 말할 수 없습니다. 문제는 인라인 블록 속성입니다. 테이블 하위 요소의 모든 사용자 에이전트 기본값에 영향을줍니다. 간단히 display : inline-block을 float : left로 대체하면 다른 모든 CSS가 동일한 위치에 떨어지는 것과 동일한 결과를 얻게됩니다.

여기에 새로운 스타일을 적용 바이올린이다}

.navInline { 
float:left; 
vertical-align:top; 
text-align: center !important; 

을 (예를 들어, 텍스트 정렬).

http://jsfiddle.net/bdTUz/

하지만 중요한 것은 ... 귀하의 질문은 이메일 템플릿을 만들고있는 상태. 수업은 효과가 없을 수 있습니다. 내가 HTML 기반 이메일을 만들 때 알 수있는 가장 좋은 방법은 인라인 스타일을 추가하는 것입니다.

이 링크 요소를 부동 http://htmlemailboilerplate.com/