desu desu - 1 month ago 8
CSS Question

How to vertical-align table cell content with image using bootstrap?

I have a little bit complicated table which looks like this

<tr class='row-eq-height'>
<td><img/><div with text></td>
<td><img/><div with text></td>
<td><img/><div with text></td>
</tr>


But images have different size so i added
max-width: 300px
to them.
And now it looks like

image | image
text | different text
some space | different space


So I want to stick my div with text to the bottom. I've already tried vertical align but it doesn't help at all.
Finally table should look like that

image | image
some space | different space
text | different text


jsfiddle example

Answer

You can use flexbox and set display: flex on tr to make each td equal height and justify-content: space-between with flex-direction: column on td to position image on top and text on bottom.

tr {
  display: flex;
}
td {
  max-width: 300px;
  border: 1px solid black;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
<table>
  <tr class='row-eq-height'>
  <td><img src="http://placehold.it/150x150"><div>Lorem ipsum dolor sit amet.</div></td>
  <td><img src="http://placehold.it/150x150"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro praesentium repudiandae odit sint iure deleniti!</div></td>
  </tr>
</table>