码迷,mamicode.com
首页 > Web开发 > 详细

css浮动元素的水平居中

时间:2014-12-13 21:43:39      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:style   io   ar   color   os   sp   on   div   问题   

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

css浮动元素的水平居中

标签:style   io   ar   color   os   sp   on   div   问题   

原文地址:http://www.cnblogs.com/kt520/p/4161879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!