厦门英文网站建设,西安公司最新招聘信息,做网站优化期间能收到网站吗,百度怎么注册公司网站点击右上方红色按钮关注“小郑搞码事”#xff0c;每天都能学到知识#xff0c;搞懂一个问题#xff01;今天给大家讲一种实现垂直居中的方法#xff1a;伪元素法(::before/::after)一、vertical-align实现了什么#xff1f;先来看一下vertical-align实现了什么#xff0…点击右上方红色按钮关注“小郑搞码事”每天都能学到知识搞懂一个问题今天给大家讲一种实现垂直居中的方法伪元素法(::before/::after)一、vertical-align实现了什么先来看一下vertical-align实现了什么在CSS中这个属性是垂直置中指在元素中所有元素位置相互置中(中线对齐)并不是相对于外框高度垂直居中。下面举个例子来看一下样式文件DOM结构上面这段代码的效果是所以vertical-alignmiddle所有元素相互是居中对齐的这里这些元素并未在整个外框里垂直居中。基于此设想vertical-alignmiddle如果有一个元素的高度是100%的话是不是就真正在外框里垂直居中了。然而直接加一个DOM放在其中又显得比较奇怪所以伪元素该派上用场了。往下看二、伪元素介入先加上伪元素的代码上面代码一定要注意display:inline-block高度100%为了不占空间宽度设置0。效果如下总结关于垂直居中的方法有很多伪元素法只是其中一种它利用了行内元素相互之间的设置vertical-alignmiddle达到中线对齐的原理。伪元素成为其中一个不可见的元素起着关键性作用。
