CSS导航居中方法

作者 :
免费
  • 正文
  • 目 录

    CSS导航菜单水平居中的多种方法:

    • 方法1:display:inline-block
    • 方法2:position:relative
    • 方法3:display:table
    • 方法4:display:inline-flex
    • 方法5:width:fit-content / width:intrinsic

    方法1:display:inline-block

    这个方法比较简单,是将容器转成「display:inline-block」行内块级元素,然后就可以直接用「text-align:center」使其达到水平居中效果。

    这里我们需要一个div来包围这个导航菜单。
    
    <div class="navbar">
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </div>
    
    给外面的div添加「text-align:center」,然后将菜单容器设成「display:inline-block」行内块级元素,菜单浮左「float:left」
    
    .navbar {
        text-align:center;
    }
    .navbar ul {
        display:inline-block;
    }
    .navbar li {
        float:left;
    }
    .navbar li + li {
        margin-left:20px;
    }
    这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码
    
    .navbar ul {
        display:inline;
        zoom:1;
    }
    

    方法2:position:relative

    这是使用「position:relative」定位方法来让元素水平居中,我不是很推荐这方法,因为代码多了个div去包住,当然这些是根据情况来使用的。

    <div class="navbar">
        <div>
            <ul>
                <li><a href="/">首页</a></li>
                …
            </ul>
        </div>
    </div>
    
    将定位div设为浮动,再定位「left:50%」,然后导航定位至「left:-50%」,这方法很有意思吧。可能表达不是很清楚,自己看代码吧^^
    
    .navbar {
        overflow:hidden;
    }
    .navbar > div {
        position:relative;
        left:50%;
        float:left;
    }
    .navbar ul {
        position:relative;
        left:-50%;
        float:left;
    }
    .navbar li {
        float:left;
    }
    .navbar li + li {
        margin-left:20px;
    }
    如果要兼容IE7,请添加以下样式:
    
    .navbar {
        position:relative;
    }
    

    方法3:display:table

    如果你喜欢简洁的代码,哪么这个方法就非常适合你了。

    <ul class="navbar">
        <li><a href="/">Home</a></li>
        …
    </ul>
    
    .navbar {
        display:table;
        margin:0 auto;
    }
    .navbar li {
        display:table-cell;
    }
    .navbar li + li {
        padding-left:20px;
    }
    

    浏览器兼容:这方法代码精简,但不支持IE7及以下版本……

    方法4:display:inline-flex

    有关flex layout的知识自己查下吧>_<

    <div class="navbar">
        <ul>
            <li><a href="/">Home</a></li>
            …
        </ul>
    </div>
    
    .navbar {
        text-align:center;
    }
    .navbar > ul {
        display:-webkit-inline-box;
        display:-moz-inline-box;
        display:-ms-inline-flexbox;
        display:-webkit-inline-flex;
        display:inline-flex;
    }
    .navbar li + li {
        margin-left:20px;
    }
    

    浏览器兼容:不支持IE7及以下版本的IE浏览器。

    方法5:width:fit-content

    <div class="navbar">
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </div>
    
    .navbar {
        text-align:center;
    }
    .navbar > ul {
        display:-webkit-inline-box;
        display:-moz-inline-box;
        display:-ms-inline-flexbox;
        display:-webkit-inline-flex;
        display:inline-flex;
    }
    .navbar li + li {
        margin-left:20px;
    }
    

    浏览器兼容:这个兼容比较低,只支持Firefox或chrome、Opera 12这些较新的浏览器。

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » CSS导航居中方法
    2492+

    本站勉强运行

    302+

    用户总数

    519+

    资源总数

    0+

    今日更新

    2021-7-27

    最后更新时间