tft每日頭條

 > 生活

 > 元素垂直對齊的方式

元素垂直對齊的方式

生活 更新时间:2024-09-27 12:19:55

點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

今天給大家講一種實現垂直居中的方法:僞元素法(::before/::after)

一、vertical-align實現了什麼?

先來看一下vertical-align實現了什麼,在CSS中這個屬性是垂直置中,指在元素中所有元素位置相互置中(中線對齊),并不是相對于外框高度垂直居中。下面舉個例子來看一下:

元素垂直對齊的方式(如何借助僞元素實現垂直居中)1

樣式文件

元素垂直對齊的方式(如何借助僞元素實現垂直居中)2

DOM結構

上面這段代碼的效果是:

元素垂直對齊的方式(如何借助僞元素實現垂直居中)3

所以vertical-align=middle所有元素相互是居中對齊的,這裡這些元素并未在整個外框裡垂直居中。基于此,設想vertical-align=middle如果有一個元素的高度是100%的話,是不是就真正在外框裡垂直居中了。然而,直接加一個DOM放在其中又顯得比較奇怪,所以,僞元素該派上用場了。往下看

二、僞元素介入

先加上僞元素的代碼:

元素垂直對齊的方式(如何借助僞元素實現垂直居中)4

上面代碼一定要注意display:inline-block,高度100%,為了不占空間,寬度設置0。效果如下

元素垂直對齊的方式(如何借助僞元素實現垂直居中)5

總結

關于垂直居中的方法有很多,僞元素法隻是其中一種,它利用了行内元素相互之間的設置vertical-align=middle達到中線對齊的原理。僞元素成為其中一個不可見的元素,起着關鍵性作用。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved