28

我正在尝试垂直对齐一些不同大小的文本,但是,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>

截图:( 来源:doheth.co.uk截屏

更新:为了清楚起见,我或多或少地知道如何vertical-align工作,即我已经知道常见的误解。

从更多调查来看,解决此问题的最简单方法似乎是将较大的文本包装在 a 中span并设置vertical-align它。then的两个孩子.categoryLinks彼此对齐。除非有人可以在没有额外标记的情况下展示更好的方法?

4

5 回答 5

17

display: inline-block垂直对齐仅在表格单元格或元素上按预期工作。如果您想了解更多信息,我建议您阅读了解垂直对齐或“如何(不)垂直居中内容”

编辑:您还有其他事情要做,因为这对我有用,就像在 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 以强调这一点。

于 2009-04-08T22:33:57.317 回答
2

Firefox 正在正确呈现。vertical-align 属性是内联的,这意味着它不适用于像 <div>(和 <p> 等)这样的块元素。尝试添加display: inline看看是否有效。

于 2009-04-08T22:32:22.937 回答
2

垂直对齐只应该适用于内联块元素(我认为图像是默认情况下唯一具有此布局属性的东西),因此要使用它来定位内联元素,首先将其变成内联块,然后你可以使用 margin 和 padding 来定位它,类似于你对普通块元素的定位:

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;

}

不过,您必须为 firefox 2 稍微调整一下,但这是因为 firefox 不支持 web 标准的一个更罕见的例子。另一方面,由于很少有人仍在使用 ffx2,因此您不必费心进行调整,这只是一个非常小的设计缺陷。

于 2009-04-08T22:33:37.910 回答
1

我解决了这个问题,只是删除了:

 white-space: nowrap;

从父 div。我不知道为什么,但添加了这条规则后,Firefox 不适用:

vertical-align: middle;
于 2014-04-10T15:40:48.643 回答
0

我有同样的问题。这对我有用:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
于 2013-01-26T19:45:34.490 回答