这篇文章主要为大家展示了“css中vertical-align属性有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中vertical-align属性有什么用”这篇文章吧。
创新互联是一家专注于网站制作、网站设计与策划设计,东乃网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:东乃等地区。东乃做网站价格咨询:18980820575
一、为什么要写这篇文章
看到一个问题：
两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？
为什么？
可以看到vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。根据MDN描述，vertical-align对::first-letter和::first-line同样适用。
所以默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。 取值： 代码如下: vertical-align: baseline|length|percentage|sub|super|top|middle|bottom|text-top|text-bottom|initial|inherit; 三、baseline 1、字母‘x’与baseline 字母x的下边缘（线）就是基线。不是字母s之类下面有尾巴的字母 
基线甚至衍生出了： 1.“alphabetic” baseline: “字母”基线 – 英文 2.“hanging” baseline: “悬挂”基线 – 印度文 3.“ideographic” baseline: “表意”基线 – 中文 
2、baseline的确定规则 1、inline-table元素的baseline是它的table第一行的baseline。 2、父元素【line box】的baseline是最后一个inline box 的baseline。 3、inline-block元素的baseline确定规则 规则1：inline-block元素，如果内部有line box，则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline，而这个元素的baseline的确定就要根据它自身来定了。 规则2：inline-block元素，如果其内部没有line box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。 3、例子：inline-block例子 
上图描述： 上图中从左到右都是line-block元素，红线代表margin-box的边界，蓝线代表baseline；黄色为border，绿色为padding，蓝色为content。 左边元素包含着没有脱离正常流的内容c，中间元素除了没有脱离正常流的内容c外还增加了overflow:hidden，右边元素没有内容，但是内容区有宽高。 分析图中各种情况inline-block元素的baseline： 上图左图，inline-block元素有处于正常流的内容，根据规则1，所以inline-block的baseline就是最后一个作为内容存在的元素的baseline，也就是内容c的baseline，而c的baseline根据自身定，就是图中蓝色。 上图中图，inline-block元素overflow:hidden不为visible，根据规则2，该inline-block元素baseline就是inline-block元素的margin-box的下边界了，即图中蓝线。 上图右图，inline-block元素没有内容，根据规则2，所以其baseline为margin-box的下边界，即蓝线。 4、例子：baseline确定规则例子 举例：
.ctn-block{
display: block;
background-color: #bbb;
line-height: 200px;
font-size: 50px;
}
.ctn-block .child1{
display: inline-block;
width: 100px;
height: 100px;
margin:10px 0;
vertical-align: baseline;
background-color: aliceblue;
}
Gg
分析： 父元素.ctn-block的base-line是Gg的baseline， inline-block元素因为没有内部line box，也没有设置overflow:visible，所以其baseline是底margin边界。 四、vertical-align基于baseline的不同取值 1、baseline 将子元素盒子的baseline与父盒子的baseline对齐。 
2、middle 将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐 这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。 
3、text-top 将盒子的顶端(margin-top边界)与父盒子的文本区域顶端对齐 审查盒子看到margin-top的顶端。 
审查文本，看到蓝色区域的上边界就是文本区域顶端。 
最终效果就是盒子的顶端与父盒子文本区域顶端对齐。 4、text-bottom 将盒子的底端（margin-bottom边界） 与父盒子的文本区域底端对齐 和text-top类似，不过将子元素的margin-bottom和文本区域的下边界对齐。 
5、sub 将子元素盒子的baseline降低，到适当的父盒子的下标位置 子元素的baseline已经确定了，就是margin-bottom下边界，但是父盒子的下标位置太不好理解。。。首先需要了解下标这个概念，我们可以通过标签为文字添加下标，将中的内容修改为GgGg，就会有如下效果。  
这里就是将元素的margin-bottom下边界和下标的baseline对齐。 6、super 将元素盒子的baseline升高，到适当的父盒子的上标位置。 与sub对应，super提升到上标内容的baseline处，首先通过标签创建上标。  
7、percentage 百分比：升高（正值）或降低（负值）子元素盒子，具体的升高/降低数值由父盒子的line-height的值乘以百分比计算得出。如果百分比为0%，就和vertical-align:baseline一样。 这个是相当好理解的，就相当于子元素盒子的baseline升高或降低，具体数值为百分比乘以父盒子的line-height。 本例中，父盒子的line-height为200px，所以设定25%，元素应该上移50px。 
并不是很直观，给它加上一个transform: translate(0, 50px);【相对下移50px】，它又移到那个熟悉的位置了。  8、length 升高（正值）或降低（负值）子元素盒子。值为升高/降低的距离，如果为0，和vertical-align:baseline一样。 以我们最常用的px作为单位，设定vertical-align:50px，效果就和上面百分比为25%（200px*25%=50px）一样了，不做例子了。 五、vertical-align基于line box的不同取值 当vertical-align设置为top和bottom时，其就不是按照baseline进行定位了，而是根据line box进行定位。子元素盒子的顶部和底部也就是其上下margin外边界。 1、top 将子元素盒子的顶部和其所在的line box顶部对齐 由于vertical-align:top将会让子元素盒子顶部与line box顶部对齐，而如果line box高度小于子元素高度，line box将会被撑开。我们先用一个高度较高的元素撑开line box，然后看看效果： 
可以看到，big子元素撑开了line box，而child1的margin-top外边界紧贴在line box的顶端。 2、bottom 将子元素盒子的底部和其所在的line box底部对齐 和top类似，由于big用于撑开line box，可以不必修改其vertical-align的值，仅修改child1为vertical-align:bottom，效果： 
六、inline元素下方可能会有一点空隙 例子：尝试将li元素在垂直方向上进行对齐的话，这个现象非常常见
Document
ul{
background-color: bisque;
}
.box { display: inline-block;
width: 100px;
height: 100px;
background-color: aliceblue;
/* vertical-align: middle;*/
}
| 
