Horizontal nav with multiline items and vertical alignment

Question

I want to create a horizontal nav that sometimes has multiline link text (not always; it's dynamically generated), and that has all the text vertically centered.

The caveat is that I'd also like to make the nav so that the a elements fill up the entirety of their containing element so that the clickable and hoverable area is much bigger for each link.

Is this possible with just CSS? Thank you.

Answer 1

full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below

---

Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table styles is going to help you here.

If you apply display:table; to your containing div/ul/whatever, and display:table-cell to each item in your navigation, you will then be able to use properties like vertical-align:middle;.

---

Do you know how many elements you will have in your navigation? If not, create a few css properties that look like something like this:

.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */