100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html 浮动后居中 css如何让浮动元素水平居中

html 浮动后居中 css如何让浮动元素水平居中

时间:2018-11-07 04:38:43

相关推荐

html 浮动后居中 css如何让浮动元素水平居中

对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家。

方法一:

1、HTML 部分:

我是浮动的

我也是居中的

2、CSS 部分:

.box{

float:left;

position:relative;

left:50%;

}

p{

float:left;

position:relative;

right:50%;

}

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

方法二:

HTML 代码

页面浮动元素的水平居中

.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }

.clearfix { zoom:1; }

.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }

.inwrap{ float:left; position:relative; left:50%;}

.page { fl

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。