css - “vertical-align: middle”在Firefox中不与中间对齐

我正在尝试垂直对齐一些不同大小的文本，但是，Firefox在中间上方显示较小的文本。

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>

屏幕截图:

css - “vertical-align: middle”在Firefox中不与中间对齐-LMLPHP

(来源:doheth.co.uk)

更新:明确一点，我或多或少知道vertical-align的工作原理，即我已经知道了常见的误解。

从更多的调查来看，似乎解决此问题的最简单方法是将较大的文本包装在span中，并在其上也设置vertical-align。 .categoryLinks的两个子项然后相对对齐。除非有人可以展示出更好的方式而无需额外加价？

最佳答案

垂直对齐仅在表单元格或display: inline-block元素上按预期方式工作。 如果您需要更多信息，建议您阅读Understanding vertical-align, or "How (Not) To Vertically Center Content"。

编辑:您还需要进行其他操作，因为它对我来说就像Firefox一样有效。我什至放下了SECTION:的字体大小，它仍然居中。您是否使用Firebug来查看其他CSS正在影响它？

其工作原理如下:

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

注意:节的字体大小从原始的0.6em更改为0.4em以强调该点。

关于css - “vertical-align: middle”在Firefox中不与中间对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/732139/