HTML CSS 控制浮动元素居中

基本的html结构：

<div>

<!--

-->

</div>

欲实现效果：

浮动元素居中的出现条件：

*1.首先是内部元素需要设置宽高

*2.元素需要同行显示

*3.元素需要居中

分析：如果想对一个元素设置宽高，那么元素类型就不能够是行内元素，只能够是块状元素）

*如果内部开始为块状元素时，如p元素，只能使用float使其同行显示(float又会改变显示模式)，但如果进行居中处理，则会发现margin:0 auto;属性失效

*如果内部初始为行内元素，因为不能设置宽高，势必会将其转化为块状元素，即display:block;然后float:left，此时发现父级元素的text-align:center居中属性也失效了

具体看一个实例

首先把里面的元素设置为p标签，对p标签设置100宽高，为了方便查看加上了边框和背景色

此时，margin这个属性是生效的，所有的块状元素均能够居中显示

效果如下：

这时，为了让所有的p元素位于一行，使用float:left

显示效果如下，发现：margin控制的居中属性失效

说解决办法之前我们看一下如果内部是行内元素的基本效果

此处使用span标签进行试验

也是设置宽高均为100，为了方便查看加上了边框和背景色，此时父元素有一个属性是：text-align:center;

显示效果如下，所有的span位于同一行，也能够居中，但是由于是行内元素，宽高不生效

此时添加上了display:block;将所有的span转化为了块状元素的显示效果，发现宽高能够正常显示了，但是却不位于同一行了，而且也不能够居中

此时如果加入float:left和margin:0 auto; 发现显示效果和使用p元素一样，出现了居中属性失效

接下来看解决办法

设置外层的div的text-align:center;

然后设置span标签的display为inline-block 去掉之前定义的margin和float

效果如图

然后设置p标签的display为inline-block 去掉之前定义的margin

效果如本文第一张图片效果

一般通常会在内部这几个标签外部套一个div或其他标签，更好的控制

使用到的display:inline-block这个是什么意思呢？

它指的是将本身设置成为block显示类型，将自己的父元素设置为inline显示类型。再在外层的大框上加上text-align:center即可以实现元素的居中（注意此时内层的float去掉）

除此之外，我们还可以使用如下代码：

.divs{background:#ccc;600px;height:300px;margin:50px auto 0;}

.divs div{margin:0 auto;background:#000;400px;text-align:center;}

p{float:left;height:100px;98px;background:#fff;border:1px solid red;margin:0 auto;}

</style>

<body>

<div>

</div>

</body>

我们发现也能够实现居中效果，但是其可扩展性较差，如果删除一个p或者添加一个p，则需要对.divs div这个样式里的width进行修改