我試圖垂直對齊，並考慮到像素完美，兩個文本。垂直對齊無法在大寫文字上正常工作
一個是完全大寫的，另一個不是。
http://codepen.io/FezVrasta/pen/EjxJoz
div {
outline: 1px solid red;
height: 31px;
width: 400px;
float: left;
line-height: 31px;
}
span {
display: inline-block;
vertical-align: middle;
}
正如你可以看到，大寫文本被完全居中（20像素的上方和下方20像素）。
另一個，26px以上，19px以下。
我認爲它總是以文本爲中心，假定以較高的可能字符爲中心......但我想僅考慮使用的字符來居中當前文本。
有沒有辦法？
注意：使用CSS表格不會解決問題。
每個瀏覽器只設置了一個字體的基線。它不關心你是否使用資金。所以，自然不是每一封信都可以完全居中，因爲它們有不同的高度，可能是下降的。
垂直對齊更「接近」值。當你設置vertical-align：top;不是所有的字母都會與頂部對齊，並且會碰到頂部邊界，只是字體的底線。
我認爲，可悲的是這是答案:( –
對不起，這是我一直在一段時間之前也花費了幾天的時間。 –
下面的代碼：
<div><span>ACEOU</span></div>
<div><span>aceou</span></div>
div {
outline: 1px solid red;
height: 31px;
vertical-align: middle;
width: 400px;
float: left;
line-height: 31px;
display: table-cell;
}
希望這有助於:)
問題仍然存在。 –
@FezVrasta檢查這個小提琴：http://jsfiddle.net/psrqdw5r/ –
@FezVrasta檢查[這]（http://jsfiddle.net/hashem/psrqdw5r/1/）出來。當您使用CSS表進行垂直對齊時，您還應該刪除「浮動」和「行高」。 –
我認爲這會做伎倆：給line-height跨越不覈實。
HTML：
<div><span>ACEOU</span></div>
<div><span>aceou</span></div>
CSS：
div {
outline: 1px solid red;
height: 31px;
//vertical-align: middle;
width: 400px;
float: left;
}
span {
line-height: 31px;
}
24px以上，20以下 –
@FezVrasta其實這個解決方案似乎完美在我的屏幕上，如果你不想使用CSS表 –
你可以嘗試的一件事是爲每個span設置不同的line-height。這是一個令人難以置信的解決方案，並不能保證它會在不同的瀏覽器和/或操作系統中爲您提供完全相同的結果（像素）。
例
div{
border:1px solid red;
box-sizing:border-box;
float:left;
height:33px;
width:25%;
}
span{
display:inline-block;
text-indent:5px;
vertical-align:middle;
}
div:first-of-type span{
line-height: 31px;
}
div:last-of-type span{
line-height: 28px;
}<div><span>ACEOU</span></div>
<div><span>aceou</span></div>
不是沒有調整的邊緣和/或位置。即使如此，您仍然可能會看到不同瀏覽器和/或操作系統的差異。如果刪除所有其他樣式，並只給出一個bg顏色，您可以看到爲什麼這是：http://prntscr.com/6xka0j – Shaggy
vertical-align對文本節點沒有影響;它會影響具有（或不具有）文本節點的內聯級元素的垂直對齊。 –