如何在 <tr> 中居中对齐 <td>？

Question

我有以下代码，它在一个表格中显示了四个图像。 float: left; CSS 的原因是它们可以换行。 JSFiddle

<table>
    <tr>

        <td style="float: left; padding: 20px;">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
            <div style="padding-top: 30px;">TEST TEXT #1</div>
        </td>

        <td style="float: left; padding: 20px;">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
            <div style="padding-top: 30px;">TEST TEXT #2</div>
        </td>

        <td style="float: left; padding: 20px;">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
            <div style="padding-top: 30px;">TEST TEXT #3</div>
        </td>

        <td style="float: left; padding: 20px;">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
            <div style="padding-top: 30px;">TEST TEXT #4</div>
        </td>

    </tr>
</table>

但是，它们目前固定在表格行的左侧（这是可以理解的，因此使用了float: left CSS）。但是，有没有一种方法可以让

元素在 元素内居中对齐，从而获得浮动的环绕效果？

是的，我必须使用一张桌子。

【问题讨论】：

• 一个简单的 在每个 td 开始标签之后应该可以工作，你测试了吗？
• 我认为 align 作为 HTML 标记已被弃用？

Answer 1

您可以在tr 上使用display: flex; flex-wrap: wrap; 而不是浮动td，这将导致相同的行为。然后您可以使用justify-content: center; 将td 居中。

tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<table>
  <tr>

    <td style="padding: 20px;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
      <div style="padding-top: 30px;">TEST TEXT #1</div>
    </td>

    <td style="padding: 20px;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
      <div style="padding-top: 30px;">TEST TEXT #2</div>
    </td>

    <td style="padding: 20px;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
      <div style="padding-top: 30px;">TEST TEXT #3</div>
    </td>

    <td style="padding: 20px;">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=600%C3%97300&w=600&h=300" />
      <div style="padding-top: 30px;">TEST TEXT #4</div>
    </td>

  </tr>
</table>