⽤CSS实现浮动元素的⽔平居中
问题描述：
基本的html结构：
<div>
<!--
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
欲实现效果：
浮动元素居中的出现条件：
*1.⾸先是内部元素需要设置宽⾼
*2.元素需要同⾏显⽰
*3.元素需要居中
分析：如果想对⼀个元素设置宽⾼，那么元素类型就不能够是⾏内元素，只能够是块状元素）
*如果内部开始为块状元素时，如p元素，只能使⽤float使其同⾏显⽰(float⼜会改变显⽰模式)，但如果进⾏居中处理，则会发现margin:0 auto；属性失效
*如果内部初始为⾏内元素，因为不能设置宽⾼，势必会将其转化为块状元素，即display:block；然后float:left，此时发现⽗级元素的text-align:center居中属性也失效了
解决⽅案：
当HTML结构如下所⽰：
<div id="container">
<div class="left">left</div>
</div>
同时，CSS这样写：
#container{
width:400px;
height:110px;
border:1px solid black;
}
#container div{
width:100px;
height:100px;
float:left;
margin:0 auto;
}
效果如下：
很明显，图⽚并没有⽔平居中。这是因为浮动元素脱离了普通⽂档流，margin：0 auto也就不起作⽤了。
解决⽅法很简单：在浮动元素外⾯再嵌套⼀层div，代码如下：
<div id="container">
<div class="content">
<div class="left">left</div>
</div>
</div>
#container{
width:400px;
height:110px;
border:1px solid black;
}
.content{
<strong>width:100px;</strong>
margin: 0 auto;
}
.content div{
width:100px;
height:100px;
float:left;
html span 居中
}
此时，浮动元素就可以⽔平居中了：
同样地，对于多个浮动元素，也可以⽤这种⽅法实现⽔平居中，效果如下：
需要注意的是，浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和，否则⽆法实现真正的⽔平居中。
这个⽅法的缺点是其可扩展性较差，如果浮动元素的个数发⽣了改变，则需要对.content这个样式⾥的width进⾏修改.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。