點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!
今天給大家講一種實現垂直居中的方法:僞元素法(::before/::after)
一、vertical-align實現了什麼?先來看一下vertical-align實現了什麼,在CSS中這個屬性是垂直置中,指在元素中所有元素位置相互置中(中線對齊),并不是相對于外框高度垂直居中。下面舉個例子來看一下:
樣式文件
DOM結構
上面這段代碼的效果是:
所以vertical-align=middle所有元素相互是居中對齊的,這裡這些元素并未在整個外框裡垂直居中。基于此,設想vertical-align=middle如果有一個元素的高度是100%的話,是不是就真正在外框裡垂直居中了。然而,直接加一個DOM放在其中又顯得比較奇怪,所以,僞元素該派上用場了。往下看
二、僞元素介入先加上僞元素的代碼:
上面代碼一定要注意display:inline-block,高度100%,為了不占空間,寬度設置0。效果如下
總結
關于垂直居中的方法有很多,僞元素法隻是其中一種,它利用了行内元素相互之間的設置vertical-align=middle達到中線對齊的原理。僞元素成為其中一個不可見的元素,起着關鍵性作用。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!