html - 2 行图像(奇数图像)

Question

我想像这样制作 2 行图像(来自 5 张图像):

     Image Image
Image Image Image

但是我怎样才能让第一行居中呢？
我的结果是这样的:

Image Image
Image Image Image

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  position: relative;
  height: auto;
  display: block;
  z-index: 999;
  border: 1px solid #ffffff;
  background-color: #ffffff;
}

<table border="0">

  <tr>
  
    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>

  </tr>

  <tr>

    <td>
      <figure style="margin: 0;">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin:0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
    <td>
      <figure style="margin: 0">
        <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
      </figure>
    </td>
    
  </tr>
  
</table>

View on JSFiddle

Answer 1

使用您现有的标记，您可以将 tr 的 display 更改为 flex 并使用 justify-content:中心；

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

figure:hover img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  position: relative;
  height: auto;
  display: block;
  z-index: 999;
  border: 1px solid #ffffff;
  background-color: #ffffff;
}

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

<center>

  <table border="0">

    <tr>

      <td>
        <figure style="margin: 0;">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>


      <td>
        <figure style="margin:0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>

    </tr>


    <tr>

      <td>
        <figure style="margin: 0;">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
      <td>
        <figure style="margin:0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
      <td>
        <figure style="margin: 0">
          <a target="_blank" href="#"><img src="https://www.wegmans.com/content/dam/wegmans/products/768/56768.jpg" height="100" width="100"></a>
        </figure>
      </td>
    </tr>
  </table>
</center>