1

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>

divwith与其周围的overflow: hidden线不共享相同的基线。

我正在寻找一种简单的方法来使其div自身对齐,就好像它遵循inline-block元素的正常规则一样。基本上,我想编写一个“正常工作”的自定义元素,无论它的消费者是否应用vertical-align样式,还是将其放在 a<td>中等等。

该表有一个示例,我希望元素垂直居中,但它会将自身向上推(其余行向下)。

这个小提琴有更多的例子展示了当一个元素是display: inline-block; overflow: hidden.

需要明确的是,这个问题是问是否<div style="overflow: hidden">可以将 a 包装成可以将其视为常规inline-block元素,智能地定位自身,无需 JS 或基于字体的像素调整。我希望能够将样式应用于最终组件,以便随意定位或对齐它,就好像它是一个常规inline-block元素一样。

4

1 回答 1

0

我不确定您希望支持哪些浏览器,但如果您将其包装起来DIVdisplay: flex;您将不会获得垂直偏移。在这里你可以看到它:

    div {
      border: 1px solid red;
      text-decoration: underline;
    }
    .ib {
      display: inline-block;
    }
    .h {
      overflow: hidden;
    }
    .flex {
      display: flex;
    }
<div>
  <div class="ib">Visible</div>
  ABgjh
</div>
<div class="flex">
  <div class="ib h">Hidden</div>
  ABgjh
</div>

由于缺乏浏览器支持,我通常不使用 flexbox,但也许这是您正在寻找的简单解决方案。希望有帮助。

于 2015-03-04T01:17:15.617 回答