Question

抱歉英国人不好...... 我搜索了已知问题的一些答案＆＃34;如何垂直对齐一个块＆＃34;。

我也找到了一些答案。但是在路上，我做了一些奇怪的额外vertical-align: middle;和line-height:500px;，它们集中了我的块！

段：

＆＃13;

.warp-warper {
  line-height: 500px;
  width: 500px;
  height: 500px;
  background-color: black;
}

.warper {
  vertical-align: middle;
  margin: 15px;
  display: inline-block;
  width: 160px;
}

.inner-block {
  line-height: normal;
  display: block;
  width: 100%;
  height: 125px;
  background-color: rgb(225, 205, 225);
  border-radius: 2px 2px 0px 0px;
}

＆＃13;

<div class="warp-warper">
  <div class="warper">
    <div class="inner-block">Content</div>
  </div>
</div>

＆＃13;

我无法理解它起作用的原因...... 我读到了line-height和vertical-align，这两者之间似乎没有联系。再次 - 在没有其中一个的奇怪行为中，块不会垂直居中。

Answer 1

他们are in the same section of the specification说：

'line-height'指定元素中线框的最小高度。

和

此属性会影响线框内的垂直位置

我不能理解css aliginng的行为

1 个答案: