无法在表格单元格中垂直对齐文本（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）

回答

相关问题