This is just a quick post on vertically aligning a horizontal menu with CSS. There are many posts out there on how to do this, but on a current project, I found that none of the tutorials I found worked. I managed to stumble upon a way that worked. I know for many this will be common sense....this post is for everybody else.

Requirements

• Horizontal menu of a fixed height
• Elements of a fixed width
• Text within these elements may be one or two lines
• All text must be vertically aligned to the middle

If this whole menu was only one line, then a simple line-height and vertical-align would have been the solution, but since there can be more than one line, this would not work.

Instead I needed to go back a few years to the world of tables. Now before anyone jumps all over that, I didn't actually use tables. Instead I used the CSS property "display" to treat the links like table cells. The way tables vertically align content within them is exactly how I wanted these links to be treated to this was a good solution.

So on with the code. The HTML we'll work with is below:

The CSS for these links is as follows

So with what's there right now you will have a horizontal list of links which are all vertically aligned to the top. The desired result we want is to have them all vertically aligned middle. I had attempted to treat the list elements as table cells but this had no effect. On a whim I decided to throw the table cell CSS onto the anchor tags instead.

To my surprise this worked like desired. I got a horizontal list of links which were vertically aligned to the middle. A height must be given to the anchor tag in order for this to work.

Summary

So once again my requirements were to have a horizontal menu of a fixed height, who's elements were a fixed width. The text within these elements may be one or two lines and they all must be vertically aligned to the middle. If you have similar requirements to myself I hope I just saved you some time.