Search code examples
cssvertical-alignment

"vertical-align: middle" does not align to the middle in Firefox

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

CSS:

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;
    font-style: normal;
    vertical-align: middle;
}

HTML:

<div class="categoryLinks">
    <em>SECTION:</em>
    Page One &#183;
    Page Two &#183;
    <a href="link">Page Three</a>
</div>

Screenshot: screenshot
(source: doheth.co.uk)

UPDATE: just to be clear, I am aware more-or-less how vertical-align works, i.e. I already know the common misconceptions.

From more investigation, it seems like the simplest way to fix this issue is to wrap the larger text in a span and set vertical-align on that too. The two children of .categoryLinks then align relative to each other. Unless someone can show a better way without extra markup?

Solution

  • 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:

    <html>
<head>
<style type="text/css">
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.4em;
        font-style: normal;
        vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
        <em>SECTION:</em>
        Page One &#183;
        Page Two &#183;
        <a href="link">Page Three</a>
</div>
</body>

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