HTML 如何居中一个float:left的元素

用过“float:left”的同学们都知道,它让元素浮动,非常好用、简单的让多个元素并排一行,缺点是让“margin: 0 auto”失效,这就没办法让元素居中了,真是让人头疼!

那么要怎么实现居中呢?说来也简单,只需要给元素加一个父元素,把它进行居中就行啦。代码如下:

<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
    <div class="con">
        <div class="box"></div>  
    </div>

我们来看看演示效果:

www.zhuei.net