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

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(。但是，有没有办法在

元素在元素内居中对齐的同时获得浮动的包装效果？

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

Answer 1

而不是浮动td，你可以在tr上使用display: flex; flex-wrap: wrap;，这将导致相同的行为。然后你可以使用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>