float:left的div在屏幕中自适应居中

最新推荐文章于 2025-03-22 10:05:13 发布

小巷而已

最新推荐文章于 2025-03-22 10:05:13 发布

阅读量7.4k

点赞数 3

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/xianglikai1/article/details/63016553

版权

Web前端专栏收录该内容

33 篇文章

订阅专栏

目标效果是，一排div都有float：left样式，水平排列，并希望它们处于屏幕的中间，办法是在div们的父级div加一个 display:inline-block 样式，父级的父级使用text-clign:center样式就可以了。代码如下：

HTML

<div class="xlk-nav">
        <div style="display: inline-block;">
            <div class="xlk-menu">菜单标题</div>
            <div class="xlk-menu">菜单标题菜单标题</div>
            <div class="xlk-menu">菜单标题</div>
            <div class="xlk-menu">菜单标题</div>
            <div class="xlk-menu">菜单标题</div>
            <div class="xlk-menu">菜单标题</div>
        </div>
    </div>

CSS

* {
    padding: 0px;
    margin: 0px;
}

.xlk-nav {
    width: 100%;
    height: 40px;
    background-color: #002B57;
    text-align: center;
}

.xlk-menu {
    height: 100%;
    float: left;
    background-color: black;
    line-height: 40px;
    color: white;
    padding: 0 20px;
    margin-right: 20px;
    
}