深⼊理解css中vertical-align属性
⼀、为什么要写这篇⽂章css设置文字垂直居中
今天看到⼀个问题：
两个div 都设置 display：inline-block，正常显⽰；但是在第⼆个div中加⼀个块级元素或者内联元素，显⽰就变了个样，为什么？
<meta charset="utf-8"/>
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
display: inline-block;
}
.align{
/*    vertical-align: top;*/
}
</style>
<body>
<div>
</div>
<div class="align">为什么？</div>
</body>
解决⽅案就是给第⼆个div加上：vertical-align:top。
关于vertical-align和基线我知道⼀点，但是这个问题我没能答出，所以学习总结分享⼀下。
⼆、vertical-align⼲什么的？
有⼀段相关信息如下：
'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for <percentage> and <length> the absolute length, otherwise as specified
可以看到vertical-align影响inline-level元素和table-cell元素垂直⽅向上的布局。根据描述，vertical-align对::first-letter和::first-line同样适⽤。适⽤于：
inline⽔平的元素
inline:<img>,<span>,<strong>,<em>，未知元素
inline-block:<input>(IE8+),<button><IE8+>....
'table-cell'元素
table-cell:<td>
所以默认情况下，图⽚，按钮，⽂字和单元格都可以⽤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确定规则例⼦
举例：
<style type="text/css">
.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;
}
</style>
<div class="ctn-block">
<div class="child1"></div>
<span>Gg</span>
</div>
View Code
分析：
⽗元素.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下边界，但是⽗盒⼦的下标位置太不好理解。。。⾸先需要了解下标这个概念，我们可以通过<sub>标签为⽂字添加下标，将<span>中的内容修改为Gg<sub>Gg</sub>，就会有如下效果。
这⾥就是将元素的margin-bottom下边界和下标的baseline对齐。
6、super
将元素盒⼦的baseline升⾼，到适当的⽗盒⼦的上标位置。
与sub对应，super提升到上标内容的baseline处，⾸先通过<sup>标签创建上标。
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）⼀样了，不做例⼦了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。