Question

基本上，我正在为一家公司制作一份时事通讯，而我需要＆＃34; Schrijf reactie＆＃34;按钮位于中间，但垂直对齐和手势不起作用，并且使用顶部/底部的媒体查询不是一种选择。

＆＃13;

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
        <style type="text/css">
        	.ReadMsgBody {width: 100%; background-color: #ffffff;}
        	.ExternalClass {width: 100%; background-color: #ffffff;}
        	body	 {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
        	table {border-collapse: collapse;}
        
        	@media only screen and (max-width: 640px)  {
        					.deviceWidth {width:440px!important; padding:0;}
        					.center {text-align: center!important;}
        			}
        
        	@media only screen and (max-width: 479px) {
        					.deviceWidth {width:280px!important; padding:0;}
        					.center {text-align: center!important;}
        			}
    
    </style>

</head>

    <body>
    
    <table bgcolor="#4275A2" width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="margin:0 auto;">
        <tr>
            <td style="padding:10px 0;">                          
                <table align="left" width="70%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                    <tr>
                        <td style="font-size: 12px; color: white; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; padding:10px 8px 10px 8px">
                            <h2 style="mso-table-lspace:0;mso-table-rspace:0;margin:0;font-size:18px;color:white;">Schrijf uw bevindingen ook eens in ons gastenboek. Dat stellen wij, en andere klanten zeer op prijs.
                         <br/><br/></h2>
                        </td>
                    </tr>
                </table>
                <table style="veritcal-align:bottom;" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                    <tr>
                        <td bgcolor="#542841" style="background-repeat:no-repeat;">
                            <a href="#" style="border-radius: 5px;padding: 20px;color:#ffffff;font-size:13px;font-weight:bold;display:block;text-align:center;text-decoration:none;font-family:Arial, sans-serif;-webkit-text-size-adjust:none;">SCHRIJF REACTIE</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
                
    </body>
    </html>

＆＃13;

Answer 1

vertical-align属性不适用于嵌套表元素，这些元素没有包含自己的表格单元格，以维护表格的典型表格结构。
列应保持高度相等，以使vertical-align属性产生预期的行为，您将需要表单元格来执行此操作。

考虑将table元素嵌套在分隔的表格单元格中td），然后您可以在其中声明vertical-align属性值：

而不是

<!-- better approach -->
<table>
   <tr>
      <td> <!-- now you can declare a vertical-align property -->
         <table></table>
      </td>
      <td> <!-- now you can declare a vertical-align property -->
         <table></table>
      </td>
   </tr>
</table>

而不是：

<!-- wrong approach -->
<table>
   <tr>
      <td>
         <table></table>
         <table></table>
      </td>
   </tr>
</table>

代码段示范：

<table bgcolor="#4275A2" width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="margin:0 auto;">
  <tr>
    <td style="padding:10px 0;vertical-align: middle;width: 70%;">
      <table align="left" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
        <tr>
          <td style="font-size: 12px; color: white; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; padding:10px 8px 10px 8px">
            <h2 style="mso-table-lspace:0;mso-table-rspace:0;margin:0;font-size:18px;color:white;">Schrijf uw bevindingen ook eens in ons gastenboek. Dat stellen wij, en andere klanten zeer op prijs.
              <br/><br/></h2>
          </td>
        </tr>
      </table>
    </td>
    <td style="padding:10px 0;vertical-align: middle;">
      <table style="veritcal-align:bottom;" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
        <tr>
          <td bgcolor="#542841" style="background-repeat:no-repeat;">
            <a href="#" style="border-radius: 5px;padding: 20px;color:#ffffff;font-size:13px;font-weight:bold;display:block;text-align:center;text-decoration:none;font-family:Arial, sans-serif;-webkit-text-size-adjust:none;">SCHRIJF REACTIE</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Vertical-align / Valign不工作

1 个答案: