浮动元素水平居中方法

最新推荐文章于 2024-02-19 16:39:26 发布

wp1119

最新推荐文章于 2024-02-19 16:39:26 发布

阅读量2.1k

点赞数 2

分类专栏： css 文章标签： css水平居中浮动盒子水平居中 css 浮动盒子水平居中 css盒子居中 float盒子水平居中

本文链接：https://blog.youkuaiyun.com/wp7021/article/details/79141451

版权

css 专栏收录该内容

5 篇文章

订阅专栏

让浮动元素居中很多布局情况下会用得到，这里记录下来
方法一：首先给父元素和子元素都加上相对定位，再让父元素和子元素同时左（右）浮动，父元素相对左（右）移动50%（left：50%），然后子元素相对左（右）移动-50%（left：-50%）），或者子元素相对右（左）移动50%（right：50%）也就可以了
例：

HTML：

<div class="box">
    <ul>
        <li>左盒子</li>
        <li>中间盒子</li>
        <li>右盒子</li>
    </ul>
</div>

CSS：

    .box {
            width: 600px;
            height: 600px;
            background-color: #f0f;
        }
    ul {
            list-style: none;
            position: relative;
            float: left;
            left: 50%;
        }

    li {
            position: relative;
            float: left;
            left:-50%;
            width: 50px;
            height: 50px;
            background-color: #8C8C8C;
            margin-left: 10px;
        }

方法二：给多个浮动的子元素多套一层盒子，然后让新增的外层盒子和原来的父盒子都相对定位并且与子元素向同方向左（右）浮动。新增的外层盒子左（右）浮动left:-50%，原来的父盒子左（右）浮动left:50%，这样更合理，也可以避免一些不必要的IE BUG
例：

HTML：

<div class="box">
    <div class="list">
        <ul>
            <li>左盒子</li>
            <li>中间盒子</li>
            <li>右盒子</li>
        </ul>
    </div>
</div>

CSS：

 .box {
            width: 600px;
            height: 600px;
            background-color: #f0f;
}
.list {
            position:relative;
            float: left;
            left: 50%;
}
ul {
            position:relative;
            list-style: none;
            float: left;
            left:-50%;
}
li {
            width: 50px;
            height: 50px;
            background-color: #8C8C8C ;
            margin-left:10px;
            float: left;
}

效果图：