Vertical Align Inside a Table

Question

I'm trying to vertial align both image and text inside 1 <td>. I know this can work if I put the image in 1 <td> and the text in another, it's just copied and has about 50 rows. Basic html:

<td>
  <img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded.
</td>

The css is here:

td {
    padding: 0.5em 0;
    text-align: left;
    vertical-align: middle;
}

td img {
    float: left;
    margin-right: 1em;
    max-width: 48px;
    vertical-align: middle;
    width: 20%;
}

ok, so in the current state the img (which is taller than the text) is vertically aligned, but the text seems to be aligned to the top. If I take out the br and place the lines of text in separate p tags it looks the same. If i take the float off the img both it and the strong text are vertically centered, but after the br it goes to a new line obviously, which is under the image. I want it to have both img and text vertically aligned...but for the text to go to a new line after the strong tag.

I've looked at lot of answers, and nothing works.

Simply Craig · Accepted Answer · 2014-12-04T19:51:39.850

0

This works just fine (You missed <table></table>):

$(document).ready(function() {
  var textHeight = $("#text-container").height();
  var imgHeight = $("table td img").height();
  var padding = (imgHeight - textHeight)/2;
  $("#text-container").css('padding-top',padding + 'px');  
});

td {
  padding: 0.5em 0;
  text-align: left;
  height: 100px;
  background-color: red;
}
td img {
  float: left;
  vertical-align: middle;
  margin-right: 1em;
  max-width: 48px;
  width: 20%;
  height:auto;
}

#text-container {
  float:right;
  padding-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td>
    <img src="http://placehold.it/50x100">
    <div id="text-container">
        <strong>Headline!</strong>
        <br />Supporting blurb, not bolded.
    </div>
  </td>
</table>

Working JSFiddle as well: http://jsfiddle.net/33xyt4ok/

Obviously remove/add the correct height you want, just used 100px to show the vertical-align was working.

edited Dec 04 '14 at 19:51

answered Dec 04 '14 at 18:54

Simply Craig

1,084
1
10
18

It is inside a table, just didn't include it. I can't put a height on the td...though that doesn't seem to hurt the fiddle. Though I do notice that the text in the fiddle is aligned to the top of the grey img...lot more red below "not bolded" than above "headline" – qazser Dec 04 '14 at 19:13
@qazser Oh ok and right, I just used `height` to further show it worked :) – Simply Craig Dec 04 '14 at 19:14
@qazser If you can provide more of the HTML and any other effecting CSS I can look into it further. However it should work from what you gave. – Simply Craig Dec 04 '14 at 19:14
so the height of the td is determined by the img at full screen widths. I could add a media query, but it seems bulky for something that should work. @Simply Craig if you read htis pls see my comment above, as it was edited. – qazser Dec 04 '14 at 19:21
@qazser If the `img` `height` is variable, then you might want to consider JavaScript as vertically aligning text perfectly along side an image seems to be problematic. See: http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image However a simply JavaScript solution would be to add a margin based on the height of the text (Would put it in a ``) and calculate top and bottom margin. – Simply Craig Dec 04 '14 at 19:39
1

ahhh...and therein lies the rub. If you have the exact code I can copy n paste, but figuring it out is probably not my bag. html and css are fine....coding, not so much. It's funny, that was one of the threads I looked long and hard at before asking this. Thanks for your replies, btw. – qazser Dec 04 '14 at 19:44
@qazser Well here is a jQuery solution. (edited above) – Simply Craig Dec 04 '14 at 19:51

Vertical Align Inside a Table

1 Answers1