Search code examples
htmlimagetexthtml-tablealignment

Aligning image with text in a table

I'm trying to align an image with text in a table such that the image is aligned to the bottom of the text.

The current code I have for the table is:

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

It currently looks like this: https://i.sstatic.net/gm319.png

How do I make the image align to the bottom of the text?

Solution

  • Maybe this will do it...

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

    It uses the style attribute -VERTICAL-ALIGN and assigns the value TEXT-BOTTOM