css让浮动元素水平居中_html/css_WEB-ITnose
程序员文章站
2022-05-29 16:57:31
...
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。
对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下:
HTML 代码:
我是浮动的
我也是居中的
CSS 代码:
.box{ float:left; position:relative; left:50%;}p{ float:left; position:relative; right:50%;}
这样就解决了浮动元素水平居中了;
父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。
推荐阅读
-
如何让浮动的元素水平居中
-
让页面底部浮动起来固定起来_html/css_WEB-ITnose
-
如何让下图中的红色部分(span)内的文字相对于红色部分竖直方向上居中呢?源代码如下,图在第二楼_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
如何让Div始终保持水平居中或者垂直居中_html/css_WEB-ITnose
-
Css中元素居中问题的实现_html/css_WEB-ITnose
-
css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
-
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
-
解读 CSS 布局之水平垂直居中_html/css_WEB-ITnose