vertical-align属性的简单理解

个人建议：不论是学css还是其他，遇到属性、方法之类的问题，先看官方文档。如果看不懂，再看别人的博客。

该属性的作用：行内元素垂直方向的对齐，注意区别于块元素垂直方向的对齐

例子1：middle属性

官文关于middle解释如下：

正常的理解就是：使用该属性的元素被放在其父元素的垂直居中位置。

像这样： 最终代码如下：

<div style="background: grey;line-height: 100px;">
    <div style="vertical-align: middle;display: inline-block;width: 30px;height: 30px;background: #000; "></div>
</div>

里边那个div（子元素）设置inline-block的原因是为了使其变为行内块元素，因为vertical-align本身就是对行内元素进行垂直方向的对齐。如果你想块元素的对齐，那么可以使用flex布局的align-items-center等属性。 外边那个div（父元素）设置line-height的原因是为了使父级元素与子元素的高度不同，使得子元素的垂直居中效果展示出来。如果父元素与子元素的高度相同，那么子元素所设置的垂直效果是展现不出来的。 像这样：

例子2：top属性

类似的，关于top属性，官文的解释为：

正常的理解是：使用该属性的元素顶端对齐于行内的最高元素。

可当我们实践时，会发现使用该属性的元素顶端会对齐于父级元素的顶端，而不是对齐于行内的最高元素，像这样： 于是关于top属性正确的理解是，顶端对齐于行内的最高点。我们可以推测，bottom属性的作用就是底部对齐于行内的最低点。可以自己动手尝试一下。 最终的代码为：

<div style="background: grey; line-height: 150px;">
    <div style="vertical-align: top;display: inline-block;width:30px;height: 30px;background: #000;"></div>
    <div style="vertical-align:baseline;display: inline-block;width: 30px;height: 30px;background: #ddd; "></div>
  </div>

例子3：text-top属性

类似的关于text-top属性，官文的解释为：

正常的理解为：使用该属性的元素顶端对齐于父级元素字体的顶端。

实践一下，我们得到以下效果，会发现方块顶端跟文字顶端并不对齐呀。其实不然，我们给文字加上背景色就会发现真的对齐了。 最终的代码为：

<div style="background: grey; line-height: 150px;">
    <div style="vertical-align: text-top;display: inline-block;width:30px;height: 30px;background: #000;"></div>
      <span style="background: #fff;">LOOK</span>
  </div>

同理，text-bottom属性也就可以推测出来了。

实践的方法已经教给你们了，关于其他的属性效果可以自己动手尝试一下，我相信你们一定会受益匪浅。