对齐表格中的图像

Question

我需要帮助将这三张图片水平对齐，并将文字居中对齐。我尝试了几种不同的CSS方法，但它只是对准一切垂直

<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>

Answer 1

这里是你如何居中图片下的文字的例子。

.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文本留为空白。

希望这有助于

Answer 2

这是你找什么？

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>