css 如何让浮动DIV水平居中

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

实例如下:

<html>
<head>
<meta charset="UTF-8">
<title>css3对话框设计</title>
<style>
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}
</style>
</head>
<body>
<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>
</body>
</html>

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在网站开发中,css float是一个经常需要使用的css属性,改属性用于设置css块级元素的浮动方向(左右浮动)。本文章向码农介绍css float使用方法和实例应用,需要的码农可以参考一下。
本文章向码农介绍CSS实现div水平垂直居中的五种方法,分别是css vertical方法,css Flexbox方法,css transform与绝对定位方式,css vertical-align方法,display:inline-block方法。需要的码农可以参考一下本文章。
css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码。
在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点。
css居中包括两个方面,一个是html元素居中,比如div盒子居中。另一个是html元素内容居中,比如一个div盒子里面有一些文字,设置这些文本在div中居中显示。本文章向码农介绍这两只居中改如何实现以及实现的具体css代码。
我们大家都知道,margin:0 auto可以使div水平居中,但有的时候,我们明明为div设置了margin:0 auto,但仍然不取作用。本文章向码农介绍一下margin:0 auto不居中的几个原因。需要的可以参一下。