vertical-align image + bottom text

Question

My template :

<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>
<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>
<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>

How do I vertical-middle align the image (the images have different sizes...) and vertical-bottom align the text(different sizes.)

The td height is dynamic.

I'm sorry but position:absolute doesn't work ...the images have different sizes.

What you have asked for is a bit vague. Can you add a picture of what you want this to look like? — Richard Parnaby-King, Mar 06 '15 at 13:25
possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Persijn, Mar 06 '15 at 14:46

Manmeet S. Oberoi · Answer 1 · 2015-03-06T13:26:59.397

2

What you can do is to have 2 rows in the table. Row 1 with all the images and Row 2 with the text

for each image add

img {    
  margin:auto;
}

and for text, align:center.

I think that should do the job.

Use this structure : http://jsfiddle.net/vse8cq5y/

edited Mar 06 '15 at 13:26

answered Mar 06 '15 at 13:21

Manmeet S. Oberoi

1,082
1
17
29

Just made an edit to make your solution a little bit more understandable for OP. http://jsfiddle.net/vse8cq5y/1/ – knocked loose Mar 06 '15 at 13:31
Use property text-align, instead of align. for
in the fiddle.(my bad, missed it the first time)
– Manmeet S. Oberoi Mar 06 '15 at 13:38

score 1 · Answer 2 · answered Mar 06 '15 at 13:33

From your given HTML and request I'm assuming this is what you will need to get what you want.

The images should automatically do what you are asking, all you need to do is position absolute the text to the bottom of the td.

By adding padding bottom to the each td, you are allowing space for the text to go, meaning that it will never overlap with your image (regardless of image size).

img {
  background-color: red;
  display: block;
  width:5em;
  height:2em;
  margin: 0 auto;
}

td {
  width:10em;
  padding-bottom: 1em;
  position: relative;
  vertical-align: middle; /*should be default*/
}
.container {
  background-color: blue;
  display:inline-block;
}

.align-bottom {
  position: absolute;
  bottom: 0;
  left:0;
  display: inline;
  width: 100%;
  text-align: center;
}

<table>
<tr>
<td class="image">
        <img src="" style="height: 4em">
        <div class="align-bottom">
            text
        </div>
</td>
    <td class="image">
        <img src="" style="height: 7em">
        <div class="align-bottom">
            text
        </div>
</td>
<td class="image">
        <img src="" style="height: 10em">
        <div class="align-bottom">
            text
        </div>
</td>
</tr>
</table>

Either set your text to have a background color, however this will cut your image off. Another option will be to check for the height of your text, then supply this value to the padding-bottom of each td (this will need to be done using JavaScript or jQuery). — Tommy Jinks, Mar 06 '15 at 14:05

vertical-align image + bottom text

2 Answers2