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
}
label{
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background-color: #10375E;
}

html

<div class="father">
    <label></label>
</div>

效果：

 

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

总结

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

 

转自 https://blog.csdn.net/chengqige/article/details/118898166