您的位置：首页 > Web前端 > CSS

html css控制浮动元素居中显示

2016-07-06 09:22 621 查看

基本的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居中属性也失效了

具体看一个实例

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

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

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

效果如下：

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

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

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

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

此处使用span标签进行试验

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

span{
height: 100px;
width: 100px;
background: #fff;
border: 1px solid red;}

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

span{
display:block;
height:100px;
width:100px;
background:#fff;
border:1px solid red;
}

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

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

接下来看解决办法

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

div{
background:#ccc;
width:600px;
height:300px;
margin:50px auto;
text-align:center;}

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

span{
display:inline-block;
height:100px;
width:100px;
background: #fff;
border: 1px solid red;
}

效果如图

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

p{
display:inline-block;
height:100px;
width:100px;
background:#fff;
border: 1px solid red;
}

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

一般通常会在内部这几个标签外部套一个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进行修改

转自

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120125625634853/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css

相关文章推荐

新的分享

章节导航