html - 将图像与表格中的文本对齐

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>

它使用样式属性 -VERTICAL-ALIGN 并分配值 TEXT-BOTTOM