浮动元素的水平居中

星期一, 2014-09-15 11:35 — shiping1

今天有同学在群里问起怎么让一个浮动元素水平居中，可能是我表达能力太差，解释了半天木有说清楚，索性还是写一个简单的 DEMO，那位同学倒是一下子就明白了。其实关于浮动元素的居中问题，在之前的自适应树型结构的 HTML中的 DEMO 就有体现，这次的浮动元素水平居中 DEMO 只是一个超级简化版。

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。分解如下：

1、HTML 部分：

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

2、CSS 部分：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

这样看来就很简单了吧，父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。如此简单如此神奇。

来自 http://wange.im/floating-element-center.html

CSS居中一个float浮动元素的核心：

让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；

#wrapper {
float: left;
position: relative;
text-align: left;
left: 50%;
}
#wrapper ul {
list-style: none;
position: relative;
left: -50%;
}
#wrapper ul li {
float: left;
position: relative; /* For IE6 */
}

<div id="wrapper">
<ul>
<li><a href="#">Button 1</a> </li>
<li><a href="#">Button 2's a bit longer</a> </li>
<li><a href="#">Butt 3</a> </li>
<li><a href="#">Button 4</a> </li>
</ul>
</div>

http://tugenhua.blog.51cto.com/3912301/772840
http://www.ueder.net/2011/03/15/%E6%B5%AE%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%B...

普通分类:

You are here