CSS “vertical-align: middle” 在 Firefox 中与中间不对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/732139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"vertical-align: middle" does not align to the middle in Firefox
提问by DisgruntledGoat
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
我试图垂直对齐一些不同大小的文本，但是，Firefox 在中间上方显示较小的文本。
CSS:
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:
HTML：
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
Screenshot:
(source: doheth.co.uk)
截图：（
来源：doheth.co.uk）
UPDATE: just to be clear, I am aware more-or-less how vertical-alignworks, i.e. I already know the common misconceptions.
更新：为了清楚起见，我或多或少知道如何vertical-align工作，即我已经知道常见的误解。
From more investigation, it seems like the simplest way to fix this issue is to wrap the larger text in a spanand set vertical-alignon that too. The two children of .categoryLinksthen align relative to each other. Unless someone can show a better way without extra markup?
从更多的调查来看，解决这个问题的最简单方法似乎是将较大的文本包裹在 a 中span并设置vertical-align在它上面。然后的两个孩子.categoryLinks相对于彼此对齐。除非有人可以在没有额外标记的情况下展示更好的方法？
采纳答案by cletus
Vertical align only works as expected on table cells or display: inline-blockelements.If you want more information I suggest you read Understanding vertical-align, or "How (Not) To Vertically Center Content".
垂直对齐仅在表格单元格或display: 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?
编辑：您还有其他事情要做，因为这对我来说就像在 Firefox 上一样。我什至降低了 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 ·
Page Two ·
<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，以突出重点。
回答by cletus
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: inlineand see if that works.
Firefox 正在正确呈现。vertical-align 属性是内联的，这意味着它不适用于像 <div>（和 <p> 等）这样的块元素。尝试添加display: inline看看是否有效。
回答by wheresrhys
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:
垂直对齐只适用于内联块元素（我认为默认情况下图像是唯一具有此布局属性的东西），因此要使用它来定位内联元素，首先将其变成内联块，然后您可以使用 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;
}
You have to tweak it a little for firefox 2though, 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 稍微调整一下，但这是因为 Firefox 不支持 Web 标准的罕见示例。另一方面，由于很少有人仍然使用 ffx2，因此您无法进行调整，这只是一个非常小的设计缺陷。
回答by robertovg
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;
回答by algreat
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>
