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

Question

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

score 1 · Answer 1 · answered Nov 04 '16 at 10:56

1

Working example http://jsfiddle.net/yg0Lhhju/1/

.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

answered Nov 04 '16 at 10:56

Bhupinder kumar

558
1
5
19

you could give some border or background-color to that container to better appreciate it is working – arhak Nov 04 '16 at 11:02
It doesn't work – desu Nov 04 '16 at 11:03
@Bhupinderkumar this is how it looks for me: https://i.imgsafe.org/c6fd355b0f.png – desu Nov 04 '16 at 11:24

score 1 · Accepted Answer · answered Nov 04 '16 at 11:02

1

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>

answered Nov 04 '16 at 11:02

Nenad Vracar

118,580
15
151
176

I've tried to use your style, but it doesn't move my div to the bottom – desu Nov 04 '16 at 11:17
Can you create fiddle with your code. – Nenad Vracar Nov 04 '16 at 11:18
https://jsfiddle.net/4wnrq0kq/ – desu Nov 04 '16 at 11:31
It should be inline-flex, not flex-inline, finally found it. Thank you – desu Nov 04 '16 at 11:39

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

2 Answers2