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
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>
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.