Question

我想创建一个包含3个单元格的表。第二个细胞必须居中，宽1厘米，高1厘米。第二个单元格中的文本必须水平/垂直居中：

我几乎成功了，但即使经过多次尝试，我绝对没有让文字显示在第二个单元格的中间：

<table>
  <tr>
    <td style="width:50%;"></td>
    <td style="min-width:1cm;max-width:1cm;border:none">
      <div style="min-height:1cm;max-height:1cm;background-color:red">
        <span class="PageNumber">1</span>
      </div>
    </td>
    <td style="width:50%;"></td>
  </tr>  
</table>

如何让span占据完整的div容器才能拥有居中的文字（垂直和水平）？

注意：实际代码更复杂，我刚刚提取出导致问题的部分（将文本置于1x1 cm单元格中）。

Answer 1

<table>
  <tr>
    <td style="width:50%;"></td>
    <td style="min-width:1cm;max-width:1cm;border:none">
      <div style="display:inline-block;min-height:1cm;max-height:1cm;background-color:red">
        <div style="margin:0 auto;vertical-align:middle;">
            <span class="PageNumber">1</span>
        </div>
      </div>
    </td>
    <td style="width:50%;"></td>
  </tr>  
</table>

TL：DR：

我在div中创建了一个div，因此margin: 0 auto会使其水平居中，而display样式会将其垂直居中。

有关CSS中心的更多信息：https://www.w3.org/Style/Examples/007/center.html

Answer 2

除了表格只应用于表格数据这一事实外，您可以使用display:flex实现所需目标：

.number {
  display: flex;
  min-height: 1cm;
  max-height: 1cm;
  background-color: red;
  align-items: center;
  justify-content: center;
}

<table>
  <tr>
    <td style="width:50%;"></td>
    <td style="min-width:1cm;max-width:1cm;border:none">
      <div class="number">
        1
      </div>
    </td>
    <td style="width:50%;"></td>
  </tr>
</table>

文本以1cm x 1cm的单元为中心

2 个答案: