inline-block
元素使用overflow: hidden
自己的位置,因此它们的底部边距是基线。来自http://www.w3.org/TR/CSS2/visudet.html#leading:
'inline-block' 的基线是它在正常流中的最后一个行框的基线,除非它没有流入行框,或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值,在在这种情况下,基线是底部边距边缘。
在实践中,这意味着这些元素会意外上移;例如,<td>
元素内部不会垂直居中。一个更简单的例子:
div {
border: 1px solid red;
text-decoration: underline;
}
.ib {
display: inline-block;
}
.h {
overflow: hidden;
}
<div>
<div class="ib">Visible</div>ABgjh</div><br>
<div>
<div class="ib h">Hidden</div>ABgjh</div>
div
with与其周围的overflow: hidden
线不共享相同的基线。
我正在寻找一种简单的方法来使其div
自身对齐,就好像它遵循inline-block
元素的正常规则一样。基本上,我想编写一个“正常工作”的自定义元素,无论它的消费者是否应用vertical-align
样式,还是将其放在 a<td>
中等等。
该表有一个示例,我希望元素垂直居中,但它会将自身向上推(其余行向下)。
这个小提琴有更多的例子展示了当一个元素是display: inline-block; overflow: hidden
.
需要明确的是,这个问题是问是否<div style="overflow: hidden">
可以将 a 包装成可以将其视为常规inline-block
元素,智能地定位自身,无需 JS 或基于字体的像素调整。我希望能够将样式应用于最终组件,以便随意定位或对齐它,就好像它是一个常规inline-block
元素一样。