“vertical-align: middle” does not align to the middle in Firefox

Question

I\'m trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.

CSS:

div.categoryLinks {
          


        

Answer 1

Vertical align only works as expected on table cells or display: inline-block elements. If you want more information I suggest you read Understanding vertical-align, or "How (Not) To Vertically Center Content".

Edit: You've got something else going on because that works for me as is on Firefox. I even dropped the font size of SECTION: right down and it's still centered. Have you used Firebug to see what other CSS is affecting it?

This works as is:

        SECTION:
        Page One ·
        Page Two ·
        Page Three

Note: section font size changed to 0.4em from original 0.6em to emphasize the point.