Question

我的代码如下：

HTML

<div class="container">
    <div class="item">
      <p>Testing</p>
      <p>Testing</p>
    </div>
    <div class="item">
      <p>Testing</p>
    </div>
</div>

CSS

.container {
  text-align: center;
  vertical-align: top;
}

.item {
  background: orange;
  width: 40%;
  padding: 30px;
  display: inline-block;
  margin-bottom: 20px;
}

当内联块具有相同内容时，我注意到一切正常。但是为什么当它们有不同的高度时，它会变得不对齐？

CodePen

Answer 1

将vertical-align: top添加到.item而不是.container，它适用于内联级和表格单元格。您可以使用vertical-align: middle垂直居中元素。

不同vertical-align值here的示例应该清楚明白。

.container {
  text-align: center;
}
.item {
  background: orange;
  width: 40%;
  padding: 30px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px;
}

<div class="container">
  <div class="item">
    <p>Testing</p>
    <p>Testing</p>
  </div>
  <div class="item">
    <p>Testing</p>
  </div>
</div>

具有可变高度的未对齐的内联块元素

1 个答案: