有的时候做垂直居中操作不好控制,今天简单探索一下这个vertical-align样式
Vertical-align:调整垂直方向的位置
使用此样式的前提,你得为该元素设置空间,比如:行高
如果给下面的div设置position:absolue;那呈现的效果就不是居中了,元素原封不动;
能让postion:absolue;移动的设置有top...和margin-等等
元素里面的文字内容是垂直居中的,因为文字是默认有行高的。
设置了vertical-align:middle;便实现了垂直居中,前提需要在父容器里面设置行高等于容器的高度,让子容器有空间条件达到相对于父容器垂直居中。Line-height:500px;
针对line-height、text-align这样的属性,它们作用在容器里面的内容,对自己里面的内容下命令,对自身不起作用,不像width,height这样的属性改变自身。
Vertical-align:它直接作用在自身,如同width,height作用在自身一样。
Verical-align:middle;
两个父级容器,其中一个容器设置此属性,并且两者的子容器都没有设置此属性
设置了vertical-align:middle;的容器中间线对准没有设置此属性的底部
两个父级容器,其中一个父级容器的子容器设置此属性:
基于这样的原因可以实现另一种垂直:
父容器有两个子容器
写一个子容器没有宽度的div,高度是父容器的高度,另一个子容器直接设置vertical-align:middle;就可以实现垂直居中。原理就是用到的:两个父级容器,其中一个容器设置此属性,并且两者的子容器都没有设置此属性。设置了vertical-align:middle;的容器中间线对准没有设置此属性的底部。
大家可以总结一下都有哪些样式属性作用于自身的,像:width、height...,哪些是作用于它里面的子元素的,像:line-height、text-align...