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>

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

  • 相关阅读:
    获取一个数组里面第K大的元素
    小白初识 归并排序(MergeSort)
    小白初识 基数排序(RadixSort)
    memset()的正确用法
    HDU2071(水题)
    HDU 2090
    并查集模板
    HDU 1222
    HDU1084(快速排序)
    HDU 2043
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5559053.html
Copyright © 2011-2022 走看看