无法跨表格单元格垂直对齐文本 (HTML)答案

【问题标题】：Unable to vertically align text across table cells (HTML)无法跨表格单元格垂直对齐文本 (HTML)
【发布时间】：2017-01-27 22:37:29
【问题描述】：

我有嵌套在 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>

【问题讨论】：

你必须使用表格吗？ Flex就是为了这个目的
@EdDogan 不，这是用于电子邮件的 HTML

标签： html css

【解决方案1】：

请不要使用表格来对齐内容。这对于 CSS flex 布局来说是一项很棒的工作。

考虑以下示例：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 flex 布局的演示指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

在您希望内容垂直对齐的td 中，使用<td valign="middle"> 或<td style="vertical-align: middle;">

【讨论】：

【解决方案3】：

如果您希望文本位于每个 td 的顶部，请为每个 td 添加一个 div 并将内容放入 div。

td div{height:100%;}

现在您可以更好地管理您想要的任何方式。

【讨论】：

我们不能使用 flex，这个 HTML 是用于电子邮件的
使用 flex 处理电子邮件有什么问题？
电子邮件客户端（例如 Outlook）不普遍支持 Flex：teamtreehouse.com/community/…

【解决方案4】：

如果您确实想使用表格，您可以将文本的行高设置为等于父 td 的高度。

你必须这样做：

td{
height:60px;
}

td span{
line-height:60px;
}

或者，您可以尝试将 td 内的 span 设置为 inline-block 并设置其属性 vertical-align:middle 或尝试顶部/底部，我不经常使用它们，所以有时它们只是表现不正常，只是尝试不同的值和看看有没有帮助！如果您正在尝试这个，请确保跨度的高度小于其父级。

【讨论】：