將圖像與表格中的文字對齊

Question

我正在嘗試將圖像與表格中的文字對齊，以便圖像與文字的底部對齊。

當前的代碼我有一個表是：

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th><h4><img src="image.png" />Title1</h4></th> 
     <th><h4><img src="image2.png" />Title2</h4></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Subtitle1</td> 
     <td>Subtitle2</td> 
     </tr> 
     <tr> 
     <td>Subtitle1</td> 
     <td>Subtitle2</td> 
     </tr> 
    </tbody> 
</table> 

目前，它看起來像這樣：

如何使圖像對齊到文本的底部？

Answer 1

也許這會做到這一點...

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th><h4><img src="image.png" style="vertical-align: text-bottom;" />Title1</h4></th> 
     <th><h4><img src="image2.png" style="vertical-align: text-bottom;" />Title2</h4></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Subtitle1</td> 
     <td>Subtitle2</td> 
    </tr> 
    <tr> 
     <td>Subtitle1</td> 
     <td>Subtitle2</td> 
    </tr> 
    </tbody> 
</table> 

它使用的樣式屬性 - 垂直對齊，並將值TEXT-BOTTOM