“vertical-align：middle”与Firefox中间不对齐

问题描述 投票：24回答：5

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

屏幕截图：screenshot （来源：doheth.co.uk）

更新：为了清楚，我知道vertical-align的工作方式或多或少，即我已经知道常见的误解。

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

css vertical-alignment
5个回答
15
投票

垂直对齐仅在表格单元格或内联块元素上按预期工作。如果您想了解更多信息，我建议您阅读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以强调要点。

2
投票

Firefox正确渲染。 vertical-align属性是内联的，这意味着它不适用于<div>（和<p>等）之类的块元素。尝试添加display：inline并查看是否有效。

2
投票

垂直对齐只应用于内联块元素（我认为图像是默认情况下唯一具有此布局属性的东西），因此要使用它来定位内联元素，首先将其转换为内联块，然后就可以了使用边距和填充来定位它类似于你如何使用普通的块元素：

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;

}

你必须使用tweak it a little for firefox 2，但这是因为firefox不支持Web标准的一个例子。另一方面，由于很少有人仍然使用ffx2，因此您无法对调整感到烦恼，而且这只是一个非常小的设计缺陷。

1
投票

我修复了这个问题只是删除：

 white-space: nowrap;

来自父div。我不确定为什么但是添加了这个规则，Firefox不适用于：

vertical-align: middle;
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.