“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 is only supposed to apply to inline-block elements ( I think images are the only things that have this layout property by default), so to use it to position an inline element, first turn it into an inline block, then you can use margin and padding to position it similar to how you woudl a normal block element:

div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;

}
div.categoryLinks em {
            font-size: 0.6em;

           display:inline-block;
        vertical-align:top;
        font-style: normal;
        padding: 2px 0 0 0;

}

You have to tweak it a little for firefox 2 though, but this is because of a raer example of firefox not supporting web standards. On the other hand you could not bother with the tweak as few people still use ffx2, and it's only a very minor design flaw.