CSS【vertical-align】属性相关

1、Demo1案例：img元素底部间隙问题

<div class="demo1">
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" />
</div>

.demo1 {
	background-color: #20B2AA;
}

img {
	width: 200px;
}

注：图片底部有一定高度的间隙

解决方法：

.demo1 {
	background-color: #20B2AA;
	font-size: 0;
}

img {
	width: 200px;
}

方法一：给父元素设置 font-size: 0px 清除底部多余间隙

.demo1 {
	background-color: #20B2AA;
}

img {
	width: 200px;
	vertical-align: bottom;
}

方式二：给行 内块元素设置 vertical-align: bottom（推荐使用该方法）

2、Demo2案例：img元素居中上下留白高度不一致问题

<div class="demo2">
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg">
 	<!-- 解决问题后续添加的占位元素 -->
	<div></div>
</div>

.demo2 {
	width: 400px;
	height: 200px;
	line-height: 200px;
	background-color: #CCCCCC;
}

img {
	height: 190px;
	vertical-align: middle;
}

注：图片上下间隙不对称

解决办法：

.demo2 {
	width: 400px;
	height: 200px;
	line-height: 200px;
	background-color: #CCCCCC;
	/* 1、font-size: 0px; 行内元素垂直对齐 */
	font-size: 0px; 
}

方法一：给父元素添加 font-size: 0px 行内元素垂直对齐

.demo2 {
	width: 400px;
	height: 200px;
	/* line-height: 200px; */
	background-color: #CCCCCC;
}

.demo2 div {
	display: inline-block;
	height: 100%;
	width: 0;
	vertical-align: middle;
}

方法二：去掉父元素的行高，添加一个与父元素等高的子元素，并设置 vertical-align: middle

注：

1. 兄弟元素影响父元素的基线，而图片的定位是需要父元素的基线的 
2. 父元素的基线受 vertical-align 影响
3. 父元素的 font-size
4. 父元素的line-height
5. 某个子元素的对齐方式

3、Demo3案例：行内块元素的错位问题

<div class="d3"></div>
<div class="d3 d3b">X</div>

div.d3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: #9ACD32;
}

注：行内元素若没有文字的时候它的基线为元素的底部，若有文字则为内部文字的基线位置

解决办法：

.d3b {
	overflow: hidden;
}

注：给第二个包含文本的元素添加 overflow: hidden， 元素不再出现错位

4、Demo4案例：文本&行内块元素垂直居中

<div class="demo4">x
	<img src="http://n.sinaimg.cn/games/3c3de2ce/20160105/3.jpg" class="img_">
	<!-- 为实现垂直居中而后添加的元素 -->
	<div></div>
</div>

.demo4 {
	width: 400px;
	height: 200px;
	background-color: #ADD8E6;
}

.demo4 img {
	width: 320px;
	height: 180px;
	vertical-align: middle;
}

注：子元素没有相对父元素居中

解决办法：

.demo4>div {
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
	background-color: bisque;
}

注：行内元素没有文字的时候它的基线为元素的底部，若有文字则为内部文字基线位置。

5、Demo5案例：文本影响元素基线对齐方式

<div class="demo5">
	<div></div>
	<div>x</div>
</div>

.demo5 {
	display: inline-block;
	/* 影响对齐方式 */
	font-size: 0px;
	background-color: #AAAAAA;
}

.demo5>div {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: #FF1493;
}

        

图一：错位

 图二：理想状态

注：对父元素添加 font-size: 0 去掉父元素的font-size: 0px 带有字母的盒子就会错位；第二个盒子继承父元素的行高，而行高大于元素本身的高度，所以就挤出了盒子，而第一个盒子对齐的是父元素的基线，而父元素的基线被第二个盒子拉了下来。