Question to say "I can!"

浮动模块的水平居中

2011-04-11

用万戈的方法!

对于定宽的非浮动元素我们可以用 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%也就可以了。如此简单如此神奇。



作者:admin | Categories:设计问题 | Tags:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

无觅相关文章插件,快速提升流量