I have a page that displays sponsor logos, with the name and url on the rightside.

html like this

<div class="sponsor">
<img />
<h4>...</h4>
<p>...</p>
</div>

The images are variable height but generally always higher than the amount of text (h4 + p)

At the moment I'm floating the img left and putting a margin-left on the h4+p so that they display to the right.

But how can I make it so the h4 and p are vertically aligned with the image in the div?

3 answers

danwellman 5600
1
point
This was chosen as the best answer

You might be able to use display:table and display:table-cell to get vertical centering.

The outer div will need display:table and you'll need an inner-wrapper div to give display:table-cell and vertical-align:middle to.

The floats might cause issues but it should be possible in modern browsers...

Answered over 8 years ago by danwellman
  • As a note, this has some compatibility issues (works in IE 8+ only), but is a good solution if you don't need to worry about that. See http://caniuse.com/#feat=css-table for more details. Ktash over 8 years ago
Ktash 1851
0
points

I don't have time at the moment to test this, but you could wrap the <h4> and the <p> tag in a div, and set display: inline on that element. From there, set the image to vertical-align: middle;. That should, in theory work, as the display block for the <h4> and the <p> should cause them to be on separate lines, but the out <div> should still allow it to align to the inline image. The floating is where I don't know if it will help.

Answered over 8 years ago by Ktash
0
points

You will want to use the vertical-align property, see how to use vertical align at http://www.vertical-align.com

Answered over 8 years ago by Vertical-Align