“垂直对齐:中间”在Firefox中不对齐中间

I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.

我正在尝试垂直对齐一些不同大小的文本，然而，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: screenshot http://www.doheth.co.uk/files/valign.jpg

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

UPDATE: just to be clear, I am aware more-or-less how vertical-align works, i.e. I already know the common misconceptions.

更新:澄清一下，我或多或少知道垂直对齐是如何工作的，也就是说，我已经知道常见的误解。

From more investigation, it seems like the simplest way to fix this issue is to wrap the larger text in a span and set vertical-align on that too. The two children of .categoryLinks then align relative to each other. Unless someone can show a better way without extra markup?

从更多的调查来看，解决这个问题的最简单方法似乎是将较大的文本包装在一个span中，并设置垂直对齐。然后. categorylinks的两个子节点相对地对齐。除非有人能展示一种不需要额外加价的更好的方式?

5 个解决方案

#1

Vertical align only works as expected on table cells or inline-block elements. If you want more information I suggest you read Understanding vertical-align, or "How (Not) To Vertically Center Content".

垂直对齐只能在表格单元格或inline-block元素上工作。如果你想要更多的信息，我建议你阅读理解垂直对齐，或“如何(不)垂直居中内容”。

Edit: You've got something else going on because that works for me as is on Firefox. I even dropped the font size of SECTION: right down and it's still centered. Have you used Firebug to see what other CSS is affecting it?

编辑:你还有别的事情要做，因为这对我来说就像在火狐上一样。我甚至去掉了SECTION的字体大小:就在下面，而且还是居中的。您是否使用Firebug查看其他CSS对它的影响?

This works as is:

这个作品的方法是:

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

Note: section font size changed to 0.4em from original 0.6em to emphasize the point.

注:截面字体大小从原来的0.6em改为0.4em，强调重点。

#2

Firefox is rendering correctly. The vertical-align property is inline, which means it doesn't apply to block elements like <div> (and <p>, etc). Try adding display: inline and see if that works.

Firefox是正确呈现。垂直对齐属性是内联的，这意味着它不适用于

(和

，等等)之类的块元素。尝试添加display: inline，看看这是否可行。

#3

Vertical align is only supposed to apply to inline-block elements ( I think images are the only things that have this layout property by default), so to use it to position an inline element, first turn it into an inline block, then you can use margin and padding to position it similar to how you woudl a normal block element:

垂直对齐应该只适用于inline-block元素(我认为图片是唯一的事情,这种布局属性默认情况下),所以使用它的位置一个内联元素,首先把它变成一个内联块,然后你可以使用保证金和填充职位类似于你如何woudl正常块元素:

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;

}

You have to tweak it a little for firefox 2 though, but this is because of a raer example of firefox not supporting web standards. On the other hand you could not bother with the tweak as few people still use ffx2, and it's only a very minor design flaw.

你不得不为firefox 2做一些调整，但这是因为一个不支持web标准的raer例子。另一方面，你也不需要费心去调整，因为很少有人仍然使用ffx2，这只是一个很小的设计缺陷。

#4

I fixed this issues just removing:

我修正了这个问题:

 white-space: nowrap;

from parent div. I'm not sure why but with this rule added, Firefox doesn't apply the:

来自父div。我不知道为什么添加了这个规则，Firefox没有应用:

vertical-align: middle;

#5

I had the same problem. This works for me:

我也有同样的问题。这工作对我来说:

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

#1