Question

我需要帮助水平对齐这三张图片，并在每张图片的中心对齐。我尝试了一些不同的css方法，但它只是垂直对齐

＆＃13;

<article>
  <table>
    <tr>
      <th>
        <img src="images/index_cws.jpg" alt="Costal Water Scenes" height="350" width="350" />
      </th>
      <th>
        <img src="images/index_ss.jpg" alt="Street Scenes" height="350" width="350" />
      </th>
      <th>
        <img src="images/index_ws.jpg" alt="Window Sunrises" height="350" width="350" />
      </th>
      <tr/>
      <tr>
        <th>
          Costal Water Scenes
        </th>
        <th>
          Street Scenes
        </th>
        <th>
          Window Sunrises
        </th>
      </tr>
  </table>
</article>

＆＃13;

Answer 1

这是你要找的吗？

article, td {
  text-align: center;
}
table {
  display: inline-table;
}

<article>
  <table>
    <tr>
      <td>
        <img src="http://placehold.it/200/66f" alt="Costal Water Scenes" height="350" width="350" />
      </td>
      <td>
        <img src="http://placehold.it/200/6f6" alt="Street Scenes" height="350" width="350" />
      </td>
      <td>
        <img src="http://placehold.it/200/f66" alt="Window Sunrises" height="350" width="350" />
      </td>
      <tr/>
      <tr>
        <td>
          Costal Water Scenes
        </td>
        <td>
          Street Scenes
        </td>
        <td>
          Window Sunrises
        </td>
      </tr>
  </table>
</article>

Answer 2

以下是如何将文本置于图像中心的示例。

.table {
  width: 100%;
 }
 
 .table td {
  text-align: center;
 }
 
 .table img {
  display: block;
  margin: 0 auto 16px;
 }

  <table class="table">
    <tr>
      <td>
        <img src="http://placehold.it/100x40" alt="" aria-labelledby="i1" />
        <span id="i1">Costal Water Scenes</span>
      </td>
      <td>
        <img src="http://placehold.it/100x40" alt="" aria-labelledby="i2" />
        <span id="i2">Street Scenes</span>
      </td>
      <td>
        <img src="http://placehold.it/100x40" alt="" aria-labelledby="i3" />
        <span id="i3">Window Sunrises</span>
      </td>
    <tr/>
  </table>

注意事项：我将图像和标题合并到一个表格单元格中。我还在一个带有唯一ID的范围中包装了每个标题，因此可以通过aria-labelledby属性将它们适当地分配给图像。

我删除了图片的替代文字，因为它们与图片标题是多余的。您可能应该考虑在图像中添加描述性替代文字来代替您之前为其添加的标题，或者如果标题是唯一需要传达的重要信息，则将alt文本留空，如我所知。 / p>

希望这有帮助

对齐表

2 个答案: