"vertical-align:middle"与Firefox中间不对齐

Question

"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;
}

Run Code Online (Sandbox Code Playgroud)

HTML:

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

Run Code Online (Sandbox Code Playgroud)

截图: 截图http://www.doheth.co.uk/files/valign.jpg

更新:为了清楚,我知道或多或少vertical-align有效,即我已经知道常见的误解.

从更多的调查来看,解决这个问题的最简单方法似乎是将较大的文本包装在一个span并设置vertical-align在那里.然后两个孩子.categoryLinks相互对齐.除非有人能在没有额外加价的情况下表现出更好的方式

Answer 1

cle*_*tus 15

垂直对齐仅在表格单元格或内联块元素上按预期工作.如果您需要更多信息,我建议您阅读了解vertical-align,或"如何(不)垂直居中内容".

编辑:你还有别的东西在继续,因为这对我有用,就像在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>

Run Code Online (Sandbox Code Playgroud)

注意:部分字体大小从原来的0.6em改为0.4em以强调要点.

`vertical-align`也适用于带`display:inline:block`的元素.因此,第一个声明"垂直对齐仅在表格单元格上按预期工作".是错的. (7认同)

归档时间：	16 年，8 月前
查看次数：	52386 次
最近记录：	6 年，9 月前