Web Design Tip – CSS Vertical Alignment

CSS Vertical alignment can be tricky. The old deprecated HTML method was using the valign attribute but this leads to validation errors for xHTML coders.

For vertical alignment on your website you can use the css property vertical-align. However the parent element must be set to display:table; and should also have a set height. The item to be vertically aligned should be set to display:table-cell; vertical-align:middle;

The full html & CSS is:

<div id="parent" style="height:200px; display:table;">

<div id="child" style="display:table-cell; vertical-align:middle;"> This is the text to align to the middle </div>

</div>

I’m sure you can find multiple uses for this in your web design. If you would like to see an example of where I used this see www.irelandchauffeurtravel.com. I vertically align the testimonials in the bottom right of the main image. Some testimonials have 3 lines, some 4 so I vertically align them to ensure that they fit nicely into the shaded area.