【问题标题】:Aligning image with text in a table将图像与表格中的文本对齐
【发布时间】:2012-12-21 20:55:06
【问题描述】:

我正在尝试将图像与表格中的文本对齐,以使图像与文本的底部对齐。

我对表格的当前代码是:

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

目前看起来像这样:

如何让图片与文字底部对齐?

【问题讨论】:

    标签: html image text html-table alignment


    【解决方案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

    【讨论】:

    猜你喜欢
    • 2019-04-24
    • 2011-01-14
    • 2013-01-28
    • 1970-01-01
    • 2016-06-19
    • 2023-03-14
    • 1970-01-01
    相关资源
    最近更新 更多