用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>
 

欲实现效果:

javascript 浮动元素居中 - 独行冰海 - 独行冰海
 浮动元素居中的出现条件:
*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;  
}  
此时,浮动元素就可以水平居中了:



同样地,对于多个浮动元素,也可以用这种方法实现水平居中,效果如下:

需要注意的是,浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和,否则无法实现真正的水平居中。

这个方法的缺点是其可扩展性较差,如果浮动元素的个数发生了改变,则需要对.content这个样式里的width进行修改.


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM