無法在表格單元格中垂直對齊文本（HTML）

我有HTML表格嵌套在HTML表格單元格中。我試圖垂直對齊與外部表格單元格的頂部和底部的內表的內容，但文字間距是不一樣的：無法在表格單元格中垂直對齊文本（HTML）

HTML代碼：

<table style="position:absolute;"> 
<tr style="position:absolute;top:30px;"> 
    <td> 
     <table> 
      <tr> 
       <td>79. Sushi Regular</td> 
      </tr> 
      <tr> 
       <td>7 pieces sushi & 1 California roll.</td> 
      </tr> 
     </table> 
    </td> 
</tr> 
<tr> 
    <td> 
     <table> 
      <tr> 
       <td style="padding:8px 0 8px 0;">$17.95</td> 
      </tr> 
      <tr> 
       <td> 
        <div style="display:inline-block;"> 
         <p>Add to Cart</p> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr>

來源

2017-01-27 alyx

你必須使用表？ Flex僅用於此目的 –

@EdDogan nope，這是用於電子郵件的HTML – alyx

如果你想你的文本將在每個TD的頂部添加一個div到每個TD，並把內容股利。

td div{height:100%;}

現在你最好能夠管理你想要的。

來源

2017-01-27 22:40:15

我們不能使用flex，此HTML用於電子郵件 – alyx

使用flex for emails有什麼問題？ –

未在電子郵件客戶端（如Outlook）中普遍支持Flex：https://teamtreehouse.com/community/how-compatible-is-flexbox-with-mailclients-such-as-outlook-gmail-and-so-on-meida -Q-不要工作好與 - 展望 – alyx

請不要使用表格進行內容對齊。這對於CSS彈性佈局來說非常棒。

請看下面的例子：https://jsfiddle.net/zbz81kft/6/

HTML：

<div class="outer-wrapper"> 
    <div class="box"> 
    <p class="description">Two Roll Lunch</p> 
    <p class="price">$9.00</p> 
    </div> 
    <div class="box"> 
    <p class="description">3. Chirashi Sushi Lunch<br>Assortment ...</p> 
    <p class="price">$13.95</p> 
    </div> 
</div>

CSS：

.outer-wrapper { 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    align-items: stretch; 
} 

.box { 
    background: #ddd; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 200px; 
    margin: 1px; 
    padding: 5px; 
}

對CSS的柔性佈局中的示範引導可以在這裏找到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-01-27 23:06:29 stefan23

在你想要的td要垂直對齊的內容，請使用<td valign="middle">或<td style="vertical-align: middle;">

來源

2017-01-27 23:07:50

如果您確實要使用表格，您可以將文本的行高設置爲等於父級td的高度。

你將不得不做這樣的事情：

td{ 
height:60px; 
} 

td span{ 
line-height:60px; 
}

或者你可以嘗試設置範圍內TD作爲內聯塊，並設置其屬性垂直對齊：中間或嘗試頂部/底部，我不要太多地使用它們，所以有時他們只是不正常的行爲，只是嘗試不同的值，看看它是否有幫助！如果你正在嘗試這一個，那麼確實給這個跨度的高度小於它的父項。

來源

2017-01-27 23:13:23

無法在表格單元格中垂直對齊文本（HTML）

回答

相關問題