This post is tackles two things, how to create a CSS menu and how to vertically center text.
The menu is a standard horizontal menu that is a little bit of HTML and CSS. Its best practice to use an unordered list so the code degrades gracefully.
If you remember back to the good old days of using table based layouts, you use a handy valign=”middle” attribute in HTML or vertical-align: middle; in CSS. The modern way to layout a page ditches tables and uses CSS positioning instead (of course tables can still be used where they make sense – tabular data!). CSS layouts have numerous advantages over tables and is definitely the way to go. However, there are some workarounds needed and one such workaround is for vertically aligning text.
Gone is the valign attribute and vertical-align pretty doesn’t work in the scenarios you would expect. A great example that uses vertically aligned text is a menu. In this example, I’ll use line-height to accomplish the vertical alignment. It’s pretty clean and you don’t have to worry about setting top/bottom padding this way either.
