zoukankan      html  css  js  c++  java
  • 水平居中总结-不定宽块状元素方法(三)


    除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现。

    方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

    我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

    代码如下:

    <body>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    </body>

    css代码:

    <style>
    .container{
        float:left;
        position:relative;
        left:50%
    }
    
    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        
        position:relative;
        left:-50%;
    }
    .container li{float:left;display:inline;margin-right:8px;}
    </style>

    这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。

  • 相关阅读:
    前端学习之——h5适配
    Python学习之——【开始】
    前端学习之----隐式类型转换
    前端学习之----数据类型
    vue学习之——生命周期
    认识自己(一)
    判断一句话是否是回文,例如, 上海自来水来自海海上
    判断是否为质数
    Python之函数进阶
    Python之冒泡排序
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5559053.html
Copyright © 2011-2022 走看看