css3实现浮动元素垂直水平居中


  如果给定了父元素和子元素的宽高,那么让子元素在父元素内实现垂直水平居中有很多种方法,但是碰到元素的宽高不确定的情况下,或是浮动之后的元素要居中就比较麻烦了,以下提供一些css3的属性来解决这个问题。

    <body>
        <div class="wrapper">
            <ul class="links">
                <li>
                    <a href="#">Link1</a>
                </li>
                <li>
                    <a href="#">Link2</a>
                </li>
                <li>
                    <a href="#">Link3</a>
                </li>
                <li>
                    <a href="#">Link4</a>
                </li>
            </ul>
        </div>
    </body>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        
        .wrapper {
            /*不论父容器设置的宽高是多少,都不会影响子元素的居中*/
            
            /*width: 75%;
            height: 10em;
            margin: 4em auto 0;*/
            background: lightgoldenrodyellow;
            
            display: -webkit-box;
            display: -ms-flex;
            display: -webkit-flex;
            display: flex;
            
            -webkit-box-pack: center;
            -ms-justify-content: center;
            -webkit-justify-content: center;
            justify-content: center;
            
            -webkit-box-align: center;
            -ms-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .links li{
            float: left;
            margin-right: 2em;
            background: cadetblue;
        }
        /*.links li:last-child{
            margin: 0;
        }*/
        .links li a{
            font-size: 2em;
            color: yellow;
        }

  由于现在设备和的屏幕的大小差异很大,所以我们在给页面布局时会考虑项目是否有自适应的效果,很多时候是不能写死容器的宽高的,这种弹性布局很好地处理了这个问题,还有一个好处在于可以让浮动之后的元素(例如li)也获取这种居中效果。不管有没有给子元素设置浮动属性,还是向左浮动或向右浮动都不会影响子元素的定位。但因为浏览器对这些css3的特性并不一定完全支持,所以还需要写一些css hack来处理兼容问题。

  更多参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM