CSS中vertical-align不起作用

问题发现

我们有的时候想垂直居中，我们就写上vertical-align:middle，但是大多数情况下是不起作用的，你知道是为什么嘛？

我的发现

vertical-align:middle这个属性必须和line-height一起使用，就是说它的什么top、middle、bottom这三个属性值都是相对于line-height的，分别的含义是，行高上，行高居中，行高底。

而且还要注意的是vertical-align这个属性是加在子元素上的，并不是加在父元素上的。而且这个子元素必须是行内块元素才有效。

代码示例

css

.father{
	width: 100px;
	height: 100px;
	line-height: 100px;
	background-color: #00B5EE
}
.child{
	display: inline-block;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	background-color: #10375E;
}

html

<div class="father">
		<div class="child">111</div>
</div>

效果：

label原本是行内元素，如果你不设置display:inline-block的话是没有用的，你可以试一试

总结

1.vertical-align必须对子元素设置，不是对父元素设置
2.必须设置line-height，不然不会起作用
3.vertical-align只对inline-block/inline元素有效