CSS让浮动元素水平居中

前端之家收集整理的这篇文章主要介绍了CSS让浮动元素水平居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。

对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下:

HTML 代码

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

CSS 代码

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

这样就解决了浮动元素水平居中了;

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%或者子元素相对左移动-50%也就可以了

 

猜你在找的HTML相关文章