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

Posted 2023-03-05

技术标签:

【中文标题】“vertical-align: middle”在 Firefox 中不与中间对齐【英文标题】："vertical-align: middle" does not align to the middle in Firefox 【发布时间】：2010-10-18 10:38:37 【问题描述】：

我正在尝试垂直对齐一些不同大小的文本，但是，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 的工作原理，即我已经知道常见的误解。

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

【问题讨论】：

How to Vertical align elements in a div?的可能重复 【参考方案1】：

Firefox 正在正确呈现。 vertical-align 属性是内联的，这意味着它不适用于像

（和

等）这样的块元素。尝试添加 display: inline 看看是否有效。

【讨论】：

或者，可能是内联块。根据实现（和跨浏览器支持），它可能会提供两全其美的效果。他把它应用到 SECTION: 这已经默认是内联的了。将 em 设置为 inline 块并没有什么不同，在 Firefox 中仍然更高。哎呀，你是对的，buti-oxa。我需要学习更专注地阅读。【参考方案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;

虽然你必须tweak it a little for firefox 2，但这是因为 Firefox 不支持 Web 标准的一个更罕见的例子。另一方面，您可以不用费心进行调整，因为仍然很少有人使用 ffx2，这只是一个非常小的设计缺陷。

【讨论】：

将 em 设置为 inline 块并没有什么不同，在 Firefox 中仍然更高。但关键是一旦你有了 display:inline-block 你就可以给 em 添加一些 padding-top 来把它往下推。【参考方案3】：

垂直对齐只能在表格单元格或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 以强调重点。

【讨论】：

只是补充一下，你可以试试display:table-cell，但我不确定浏览器对它的支持是什么。他说的是 text-align: center CSS 属性，而不是 valign HTML 属性。 @buti-oxa：不，他不是。他说的是 CSS 垂直对齐属性 vertical-align 也适用于带有display:inline:block 的元素。因此，第一条语句“垂直对齐仅在表格单元格上按预期工作”。错了。感谢您的链接。它很好地通过垂直对齐。【参考方案4】：

我遇到了同样的问题。这对我有用：

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

【讨论】：

【参考方案5】：

我解决了这个问题，只是删除了：

 white-space: nowrap;

来自父 div。我不知道为什么，但是添加了这条规则后，Firefox 不会应用：

vertical-align: middle;

【讨论】：

以上是关于“vertical-align: middle”在 Firefox 中不与中间对齐的主要内容，如果未能解决你的问题，请参考以下文章

文字在图片中间 vertical-align：middle 图片透明文字不透明background：rgba(0,0,0,0.5)

img 图片和span文字水平一行显示 vertical-align:middle

表格内span 垂直居中问题，应该给span也加vertical-align: middle;

img标签在div中水平垂直居中--两种实现方式

css 为啥给span加vertical-align: middle不起作用？

垂直居中小记 line-height table vertical-align：middle