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

最新推荐文章于 2024-09-04 16:37:26 发布

小小幸福哟

最新推荐文章于 2024-09-04 16:37:26 发布

阅读量1w

点赞数 4

分类专栏：知识学习文章标签： html css

知识学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本的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>