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

Question

我有以下代码，它在表格中显示四个图像。CSS的原因float: left;是让它们换行。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: leftCSS）。但是，有没有一种方法可以在使 <td> 元素在 <tr> 元素内部居中对齐的同时获得浮动的环绕效果？

是的，我确实必须使用桌子。

Answer 1

td您可以使用 和 来代替浮动 ，display: flex; flex-wrap: wrap;这将tr导致相同的行为。然后你可以使用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>