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

Question

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

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