純css實現多標籤浮動居中(任意個數)

2022-08-28 09:45:09 字數 376 閱讀 5005

在做的乙個網頁上有一塊要用浮動標籤,具體就是網頁底部有未知數量,未知尺寸的元素要水平居中,有點類似於分頁器。

首先,我們先新建乙個容器con,就是標籤的爸爸,用來控制標籤在頁面的位置,

.father

接下來分析子元素的屬性,因為元素的尺寸是未知的(主要是寬度),所以不能給固定寬度,標籤的個數也是未知的,有可能是3個,也有可能是13個,

所以也不能給絕對定位,不然還得給每個標籤定位,所以只能用relative了。

.children

注意這個時候不能添上float屬性,不然無法居中,加上display: inline-block;能讓元素自動根據寬度排成一列,並且居中。

-->.children就是這麼easy,效果是下面這個樣子滴

純CSS實現垂直居中

垂直居中是布局中十分常見的效果之一,為實現良好的相容性,pc端實現垂直居中的方法一般是通過絕對定位,table cell,負邊距等方法。有了css3,針對移動端的垂直居中就更加多樣化。html結構 垂直居中 方法1 table cell box1方法2 display flex box1方法3 絕對...

css實現任意元素居中

width 200px margin 0 auto 水平居中 div position absolute width 500px height 300px margin auto top 0 left 0 bottom 0 right 0 水平垂直居中 div position relative w...

純css實現元素水平垂直居中

在前端頁面布局的時候,我們需要對某個元素進行相對於其父元素或整個文件進行水平垂直居中的顯示布局。而如何快速的運用css進行相對於的布局,這裡,總結了三種方法。這裡父元素只需要給它乙個定位的屬性就行,在子元素下設定相對定位,這裡有兩種寫法,第一種就是沒有注釋的,把left,right,top,bott...