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

Firefox is rendering correctly. The vertical-align property is inline, which means it doesn't apply to block elements like <div> (and <p>, etc). Try adding display: inline and see if that works.


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.

Tags:

Css

Vertical Alignment

Recent Posts