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

我不确定您希望支持哪些浏览器，但如果您将其包装起来DIV，display: 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 回答