首页 > 代码库 > css浮动元素的水平居中
css浮动元素的水平居中
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。分解如下：
1、HTML 部分：
<div class="box">
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
2、CSS 部分：
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
这样看来就很简单了吧，父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。如此简单如此神奇。
css浮动元素的水平居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。