對齊表格中的圖像

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>