HTML 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 浮动元素居中 - 独行冰海 - 独行冰海](http://img6.ph.126.net/xDbJ9NsGhZEQWPDg4MTAOA==/1299569967490703726.jpg)
*1.首先是内部元素需要设置宽高
*2.元素需要同行显示
*3.元素需要居中
分析:如果想对一个元素设置宽高,那么元素类型就不能够是行内元素,只能够是块状元素)
*如果内部开始为块状元素时,如p元素,只能使用float使其同行显示(float又会改变显示模式),但如果进行居中处理,则会发现margin:0 auto;属性失效
*如果内部初始为行内元素,因为不能设置宽高,势必会将其转化为块状元素,即display:block;然后float:left,此时发现父级元素的text-align:center居中属性也失效了
具体看一个实例
首先把里面的元素设置为p标签,对p标签设置100宽高,为了方便查看加上了边框和背景色
此时,margin这个属性是生效的,所有的块状元素均能够居中显示
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img4.ph.126.net/tntTXPhSQBxhPSQmZc4XNw==/6597185215377023264.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img8.ph.126.net/g5ZoIiaGKo1ooBy6WsJynA==/566890603112860028.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img2.ph.126.net/RaFp0R-DWWXGBiEo7OAnrA==/1282962943864770192.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img4.ph.126.net/GMdE3AN-v7xMqe3dLYxG6A==/3104950468112844454.jpg)
此处使用span标签进行试验
也是设置宽高均为100,为了方便查看加上了边框和背景色,此时父元素有一个属性是:text-align:center;
显示效果如下,所有的span位于同一行,也能够居中,但是由于是行内元素,宽高不生效
此时添加上了display:block;将所有的span转化为了块状元素的显示效果,发现宽高能够正常显示了,但是却不位于同一行了,而且也不能够居中
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img6.ph.126.net/SCzZnvwLfBgue0Ls0n8xzg==/2590414210685766446.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img9.ph.126.net/RiqLyBw5wVgZcPetvz7Ldg==/2687241602674230189.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img2.ph.126.net/8MSGrysMWgYsD6B3Rikdlg==/2684708327883838602.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img6.ph.126.net/Iwy13Iv5LvU_dRJAvJsH6Q==/1319554690837154326.jpg)
此时如果加入float:left和margin:0 auto; 发现显示效果和使用p元素一样,出现了居中属性失效
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img8.ph.126.net/DWD5V7cOtXpK_EYY7FNPeA==/6597172021237489068.jpg)
设置外层的div的text-align:center;
然后设置span标签的display为inline-block 去掉之前定义的margin和float
效果如图
然后设置p标签的display为inline-block 去掉之前定义的margin
效果如本文第一张图片效果
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img9.ph.126.net/D5YH-Mqg2O4wJzeCnB5cNw==/2796172418661238229.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img3.ph.126.net/gRFLzjI0ah3wycPaWFfTNg==/2803209293079011213.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img3.ph.126.net/htvFIvRTkWcwB6gv3Y_r8g==/1279303769167541043.jpg)
![javascript 浮动元素居中 - 独行冰海 - 独行冰海](http://img6.ph.126.net/kYh4MLflHFPMY-YZZjjbXw==/1279303769167541046.jpg)
一般通常会在内部这几个标签外部套一个div或其他标签,更好的控制
使用到的display:inline-block这个是什么意思呢?
它指的是将本身设置成为block显示类型,将自己的父元素设置为inline显示类型。再在外层的大框上加上text-align:center即可以实现元素的居中(注意此时内层的float去掉)
除此之外,我们还可以使用如下代码:
<style type="text/css">
.divs{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
.divs div{margin:0 auto;background:#000;width:400px;text-align:center;}
p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
</style>
<body>
<div class="divs">
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
</div>
</body>
我们发现也能够实现居中效果,但是其可扩展性较差,如果删除一个p或者添加一个p,则需要对.divs div这个样式里的width进行修改