vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。
网上关于这个属性的原理说得很是复杂，看一眼就让人觉得望而生畏，而且大可不必完全理解其原理，只要懂得其规律，我们足够使用即可，下面把我的理解分享给大家：
基线
要了解vertical-align属性，必须懂得基线，怎么理解基线呢？
1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。
2、各种字体、图片、行内html元素等可展示的内容都有各自的基线，要想知道具体内容的基线我们可以找一个简单的参照物：小写字母“x”，为什么找它呢？因为英文字母的基线恰好就是小写"x"的最下方，比较容易看出。
知道了以上两点我们就可以很容易知道其他内容元素的基线位置了，把其他元素和小写“x”放在一行展示一下就一眼可以看出了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid cyan;
font-size: 30px;
}
div .span1 {
display: inline-block;
background-color: green;
}
div .span2 {
display: inline-block;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div>
x
<img src="./demo.jpg" alt="">
汉字
<input type="text">
<button>按钮</button>
<span class="span1">span1</span>
<span class="span2">span2</span>
</div>
</body>
</html>
vertical-align属性
了解了上述行内元素的排序原则，我们可能会有个疑问：如果我们需要某些行内元素不按照基线排列怎么办？答案就是使用vertical-align属性。
首先，vertical-align属性是针对行内元素才有效果，它改变了当前行内元素和父元素字体两者之间的对齐方式，默认值是baseline，即两者基线对齐，如上面我们测试的一样。
关于各个属性值可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align，可简单在div中加入小写字母“x”和一张图片分别切换属性进行验证即可。
回到上面提到的div中图片下方空隙的问题，只需要设置图片的vertical-align：bottom，这样会使得图片的底部和整行的底部对齐，也就不会有空隙了。
有两个属性稍作解释：
1、当设置属性为"%"的时候，指的是当前行内元素的line-height属性值的占比，可以设置成正负值，行内元素基线相对父元素字体基线上下移动这个百分比的距离。如下图，设置图片vertical-align: 50%; line-height: 30px; 本来图片最下方应该和"x"底部对齐的，现在上移了15px，如果是-50%，就会相对下移15px。当然也可以直接设置为length，vertical-align：15px;效果也是一样的
2、当设置属性为“middle”的时候，行内元素中间位置会和父元素字体基线上方1/2"x-height"位置对齐，“x-height”其实就是父元素中小写字母“x”的高度，简单来说，就是行内元素的中间位置会和父元素中的小写字母“x”的中间位置（x的交叉点）对齐，就相当于两者中间对齐了。
更多css干货请点击
5375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
