html - 为什么垂直对齐 CSS 属性不起作用并且没有将跨度放在其父级的中间高度？

Question

我已经有一段时间很难理解vertical-align属性了，而且我还没有成功地应用它，所以我决定在这里写。

有简单的标记

<div class="parent">
  <span class="text">Some text centered here
</div>

和

.parent{
  height:100px;
  background-color:red;
  .text{
    vertical-align:middle;
    background-color:green;
  }
}

结果是

为什么 span 不在父容器中居中？这个属性究竟适用于什么？

给你的代码笔：

https://codepen.io/anon/pen/wXYoBO

请注意，我不是在这里问如何在 div 中居中元素，而是为什么这个特定的 css 属性不能像常识那样工作。

在这里，vertical-align 开始生效 https://codepen.io/anon/pen/QxZpYP

标签： htmlcss

Answer 1

如果你想使用vertical-align: middle它需要结合display: table-cell并申请父母，我不推荐这个解决方案，但是下面是你的代码，固定的，和一些其他的解决方案。

解决方案 1

.parent{
  height:100px;
  display: table-cell;
  vertical-align: middle;
  background-color: red
}

.text{
  background-color:green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

解决方案 2

使用line-height为.parent和vertical-align孩子定义的。在这个解决方案中，child 相对于 垂直对齐line-height，它被拉伸了——它有 100px。

.parent {
  height: 100px;
  background-color: red;
  line-height: 100px;
}

.text {
  vertical-align: middle;
  line-height: normal;
  background-color: green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

解决方案 3

我建议使用display: flex，因为display: table-cell在表格之外使用根本不是一个好习惯。align-items: center垂直justify-content: center对齐内容，水平对齐内容。

.parent{
  height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red
}

.text{
  background-color:green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>