“vertical-align：middle”在Firefox中不与中间对齐 [英] "vertical-align: middle" does not align to the middle in Firefox
问题描述
CSS：
$ 我试图在垂直方向上排列不同大小的文字， b$ b
div.category链接{
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>
第一页&＃183;
Page Two&＃183;
< a href =link>第三页< / a>
< / div>
屏幕截图：
UPDATE ：为了清楚起见，
从更多的调查来看，这似乎是一个很好的例子。解决这个问题的最简单的方法是将较大的文本包装在 span 中，并将 vertical-align 。 .categoryLinks 的两个孩子然后相对于彼此对齐。
垂直对齐只能在表格单元格或内联块元素上正常工作。如果您想了解更多信息，建议您阅读了解vertical-align或How（not） 垂直居中内容。
编辑：您还有其他问题，因为它适合我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>
第一页&＃183;
Page Two&＃183;
< a href =link>第三页< / a>
< / div>
< / body>
注意：部分字体大小从原来的0.6em更改为0.4em强调要点。
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
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 ·
Page Two ·
<a href="link">Page Three</a>
</div>
Screenshot:
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?
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".
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?
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.
这篇关于“vertical-align：middle”在Firefox中不与中间对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
