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）。然而，有没有一种方法，我可以获得浮动的包装效果，同时具有＆lt; td＆gt;元素中心在＆lt; tr＆gt;内对齐元件？

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

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>

如何居中对齐？

1 个答案: