Centering single AND multi-worded links vertically

Question

I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.

http://codepen.io/Compton/pen/ufGCI

Answer 1

You can try this, it's a bit hackish but it works:

ul li span {
    display: inline-block;
    vertical-align: middle;
    height: 110px;
    font-size:2em;
    text-align: center;
    padding: 0 20px;
    line-height: 110px;
}
.doubleLine {
  display: table-cell;
  line-height: 1em;
}

The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.

I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.