将float元素居中的几种办法

在HTML+CSS布局中,元素的居中一直是定位非常重要的部分。

下面这些方法基本上是我在网上查阅资料以及自己的一些思考改良所得,不完全算是自己的原创。


1、垂直居中(容器内垂直居中)

思路:在float元素外层加一个div,然后在css中设置display属性。
外层DIVcss样式:
div{
    display: table-cell;
    margin: 0 auto;
}


 2.水平居中

方法一思路、在float元素外层加一个table ,在css中设置table的属性:

table{
    margin: 0 auto;
}

方法二思路、在float元素外层加一个div,设置外层div position 为 relative,float元素 position 为 absolute,然后通过相互的偏移量抵消来设置:

.outer{
    position: absolute;
    left: 50%;

}

.inner{
    position: relative;
    float: left;
    left: -50%;
    width: 200px;
    height: 200px;
    background-color: #000;
}

方法三思路、在外层包裹一个div,设宽度与浮动元素总宽度相等,让外层div:margin:0  auto。

.outer{
margin: 0 auto;
width: 400px;

}

.inner{ /*这里我设置了两个浮动元素*/
    float: left;
    width: 200px;
    height: 200px;
    background-color: #000;
}


3、垂直水平居中

方法一、此思路也是从 水平居中 的方法三中扩展出来的:在外层加一个div,设宽高与浮动元素总宽高相等,然后设置外层div position 为 absolute ,最后通过left/top 以及margin-left/margin-top的值来调整,但是此方法的弊端是扩展性较差,增删一个float元素都要去改外部div 的宽高以及移动的距离。

.outer {
        width: 302px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -151px;
        margin-top: -50px;
    }
    
    .pp,
    .ppp,
    .pppp {
        float: left;
        height: 100px;
        width: 98px;
        background: #fff;
        border: 1px solid #000;
    }


方法二、与方法一思路相同,只是在CSS中的样式有一点小差别:

.outer{
  width: 50px;
  height: 50px;
  background:red;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin:auto;
}

.inner{
  width: 50px;
  height: 50px;
  background: #000;
  float: left;
}



当然设置了浮动元素之后要记得清除浮动,避免浮动元素带来的几大问题。

这里清除浮动我在查找资料的时候,根据资料的分析得出对普通流影响最小的清除浮动的方式是:

.outer:before,.outer:after { content:""; display:table; }
.outer:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 
.outer { zoom:1; }

至于原理的话这又是一篇很长的分析文,下次等我吃透了再回来继续
 : )


  

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值