Vertical-align/Valign not working

-3

基本的に私は会社のニュースレターを作っていますが、 "Schrijf reactie"ボタンが中央にある必要がありますが、垂直方向の整列とvalignは機能していません。トップ/ボトムはオプションではありません。Vertical-align/Valign not working

<html> 
 
<head> 
 

 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    
 
     <style type="text/css"> 
 
     \t .ReadMsgBody {width: 100%; background-color: #ffffff;} 
 
     \t .ExternalClass {width: 100%; background-color: #ffffff;} 
 
     \t body \t {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif} 
 
     \t table {border-collapse: collapse;} 
 
     
 
     \t @media only screen and (max-width: 640px) { 
 
     \t \t \t \t \t .deviceWidth {width:440px!important; padding:0;} 
 
     \t \t \t \t \t .center {text-align: center!important;} 
 
     \t \t \t } 
 
     
 
     \t @media only screen and (max-width: 479px) { 
 
     \t \t \t \t \t .deviceWidth {width:280px!important; padding:0;} 
 
     \t \t \t \t \t .center {text-align: center!important;} 
 
     \t \t \t } 
 
    
 
    </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>

出典

2017-12-06 Akhilleús

は、なぜあなたはフレキシボックスを使用していませんか？これは、テーブルではなくdivで簡単になります。 – Leander

CBroe

** veritcal ** ** TO ** ** vertical ** – Sonia

答えて

vertical-alignプロパティは、テーブルの典型的な表形式の構造を維持するために、独自のない含むテーブル細胞を持たないネストされた表要素に適用されません。
vertical-alignプロパティが期待される動作になるためには、列の高さを同じに保つ必要があります。これを行うにはテーブルセルが必要です。

あなたは、その後にvertical-alignプロパティ値を宣言することができます分離テーブルセル（td）にごtable要素を入れ子に考えてみましょう：

なく、この：この代わりの

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

を：

 <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>

出典

2017-12-06 09:44:00 UncaughtTypeError

ありがとう、これは:) –

Vertical-align/Valign not working

答えて

関連する問題