야후 테이블 센터 정렬

<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;"> 
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;"> 
    <tr> 
     <td width="100%" valign="top"> 
      <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth"> 
       <tr> 
        <td><img src="spacer.gif" width="100%" height="30" alt="" /></td> 
       </tr> 
      </table> 
      <!-- More tables with content --> 
     </td> 
    </tr> 
</table> 
</body>

나는 이것과 연구에 대해 많은 테스트를 해왔다. 나는 내가 테이블을 yahoo에 중심에 둘 것을 기대하면서 테스트하려고 할 때 올바르게 이것을하고 있다고 믿는다.야후 테이블 센터 정렬

수정 사항은 table-layout을 두는 것으로 가정합니다 : fixed; 너비가 100 % 인 바깥 쪽 테이블에.

내가 한 것입니다.

아무도 내가이 일을하지 않기 위해 잘못한 것을 발견 할 수 있습니까?

건배

출처

2016-08-03 Max Lynn

아래 코드는 문제를 해결합니다. 귀하의 이메일 코드는 단지 몇 가지 더 CSS 재설정이 필요합니다.

<html> 
    <head> 
     <style> 
      /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */ 
      table { 
       border-spacing: 0 !important; 
       border-collapse: collapse !important; 
       table-layout: fixed !important; 
       margin: 0 auto !important; 
      } 
      table table table { 
       table-layout: auto; 
      } 
     </style> 
    </head> 
    <body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;"> 
     <center style="width: 100%; background: #f6f6f6;"> 

      <!-- Your Email Code Begins Here --> 
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;"> 
       <tr> 
        <td width="100%" valign="top"> 
         <table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth"> 
          <tr> 
           <td><img src="spacer.gif" width="100%" height="30" alt="" /></td> 
          </tr> 
         </table> 
         <!-- More tables with content --> 
        </td> 
       </tr> 
      </table> 
      <!-- Your Email Code Ends Here --> 

     </center> 
    </body> 
</html>

출처

2016-08-05 14:37:51

위의 코드가 작동하거나 콘텐츠 테이블을 래핑하는 첫 번째 태그에 align = "center"를 추가하면됩니다. 중요한 비트는 야후가 테이블의 정렬 매개 변수를 무시한다는 것입니다. 태그에만 관심을 기울입니다. –

답변

관련 문제