CSS属性vertical-align详解（CSS之五）

CSS属性vertical-align详解

作用对象

vertical-align的意思是在垂直方向进行对齐。它主要对以下属性的元素有效 inline元素、inline-block元素和普通的文本。

行盒：line-box

定义：
（盒的排布方式，不是行盒）在一个内联格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。
（盒的对齐方式，不是行盒）盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。
（什么是行盒）包含来自同一行的盒的矩形区域叫做行盒。

vertical-aligh默认值baseline

baseline：把盒的基线与父级盒的基线对齐。如果该盒没有基线，就把bottom margin边和父级的基线对齐。（为默认值）这里我们需要知道什么是baseline，baseline在不同的盒子里有什么样的表现。

简单来说，baseline是小写字母x下面的一条线。

具体来说

1. 在文本之类内联元素中，基线是字符x的下边缘位置（中文的底部并不是基线）。
2. 在inline-block元素中，也分两种情况
   • 如果该元素中有内联元素，基线就是最后一行内联元素的基线
   • 如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘
3. img标签的display设置为inline还是inline-block，其基线都为margin-box的下边缘。

参数

值	描述
baseline	默认。元素放置在父元素的基线上。
middle	把此元素放置在父元素的中部。
top	把元素的顶端与行中最高元素的顶端对齐。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-top	把元素的顶端与父元素字体的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

• baseline 就是当前元素基线与父元素的基线对齐
  父元素的基线就是指行盒的基线。其基线是相对固定不变的，可以在行盒里写一个字母X，行盒的基线就是字母X的底部。它的基线是永远相对于这个x不变的。

<div class="block">
	<span>x子元素A</span>xHgf
</div>
<style>
.block {
	height: 200px;
    width: 500px;
    border: 1px solid #ddd;
    font-size: 50px;
}
span {
	background-color: #ddd;
}
</style>

分析：
父元素.block的base-line是xHgf的baseline。

• middle
  当前元素的垂直中心点与行盒基线往上 1/2 x-height 处对齐（简单说就是X字母的中心位置对齐）。

<div class="block">
	<span>x子元素A</span>xHgf
</div>
<style>
.block {
	height: 200px;
    width: 500px;
    border: 1px solid #ddd;
    font-size: 50px;
}
span {
	background-color: #ddd;
	vertical-algin: middle;
}
</style>

• top: 当前元素的顶边和行内最高元素的顶边对齐。

<div class="block">
	<span class="child"></span>
	<span class="top">x子元素A</span>xHgf
</div>
<style>
    .child {
        display: inline-block;
        width: 40px;
        height: 80px;
        margin-top: 20px;
        background-color: #ff0000;
    }
    .block {
		height: 200px;
	    width: 500px;
	    border: 1px solid #ddd;
	    font-size: 50px;
	}
	.top {
		vertical-align: top;
		background-color: #ddd;
	}
</style>

图中 子元素A设置成top,它的与当前行盒里最高元素的顶端相对齐，顶端是包括margin值的。

• bottom: 当元素的底端与行中最低的元素的底端对齐。（网上写顶端，意思有待研究）

• text-top 把元素的顶端与父元素字体的顶端对齐。（字体很重要，它对齐的是与父元素字体一样的顶端）

<div class="block">
	<span class="child"></span>
	<span class="c2">x子元素A</span>
	<span class="c3">x子元素3</span>
	<span class="c4">x子素4</span>
</div>
<style>
    .block {
        border: 1px solid #ddd;
        font-size: 50px;
    }
    .child {
        display: inline-block;
        width: 40px;
        height: 80px;
        margin-top: 20px;
        background-color: #ff0000;
    }
    .c2 {
        background-color: #ddd;
        vertical-align: text-top;
        font-size:30px;
    }
    .c3 {
        font-size:50px;
    }
    .c4 {
        font-size:80px;
        background-color: #ff0000;
    }
</style>

图中 父元素字体是 50px；而与之相同的子元素3的字体50px, 所以可以看成是与子元素3的顶部对齐。
vertical-align:text-bottom 同理，与底部对齐。
其他属性比较不重要就不再阐述了。

参考

web前端vertical-align的作用及对象详解

css属性之vertical-align详解