垂直对齐无法在大写文字上正常工作

一个是完全大写的，另一个不是。

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表格不会解决问题。

来源

2015-04-24 Fez Vrasta

不是没有调整的边缘和/或位置。即使如此，您仍然可能会看到不同浏览器和/或操作系统的差异。如果删除所有其他样式，并只给出一个bg颜色，您可以看到为什么这是：http://prntscr.com/6xka0j – Shaggy

vertical-align对文本节点没有影响;它会影响具有（或不具有）文本节点的内联级元素的垂直对齐。 –

每个浏览器只设置了一个字体的基线。它不关心你是否使用资金。所以，自然不是每一封信都可以完全居中，因为它们有不同的高度，可能是下降的。

垂直对齐更“接近”值。当你设置vertical-align：top;不是所有的字母都会与顶部对齐，并且会碰到顶部边界，只是字体的底线。

来源

2015-04-24 11:28:10

我认为，可悲的是这是答案:( –

对不起，这是我一直在一段时间之前也花费了几天的时间。 –

下面的代码：

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

希望这有助于:)

来源

2015-04-24 11:13:42

问题仍然存在。 –

@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; 
}

链接：http://codepen.io/anon/pen/oXNOPb

来源

2015-04-24 11:26:10 ketan

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>

来源

2015-04-24 11:35:43 Shaggy

垂直对齐无法在大写文字上正常工作

回答

相关问题