纯css实现多标签浮动居中(任意个数)

时间:2023-02-14 12:06:21

在做的一个网页上有一块要用浮动标签,具体就是网页底部有未知数量,未知尺寸的元素要水平居中,有点类似于分页器。

首先,我们先新建一个容器con,就是标签的爸爸,用来控制标签在页面的位置,
.father{position:absolute;width:100%;height:30px;bottom:0;}

接下来分析子元素的属性,因为元素的尺寸是未知的(主要是宽度),所以不能给固定宽度,标签的个数也是未知的,有可能是3个,也有可能是13个,
所以也不能给绝对定位,不然还得给每个标签定位,所以只能用relative了。

.children{position:relative;}
注意这个时候不能添上float属性,不然无法居中,加上display: inline-block;能让元素自动根据宽度排成一列,并且居中。

-->.children{position:relative;display: inline-block;}就是这么easy,效果是下面这个样子滴

纯css实现多标签浮动居中(任意个数)