HTML CSS 控制浮动元素居中

最新推荐文章于 2024-02-19 16:39:26 发布

逸少KevinLM

最新推荐文章于 2024-02-19 16:39:26 发布

阅读量1.3k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

基本的html结构：

<div>

<!--

-->

</div>

欲实现效果：

浮动元素居中的出现条件：

*1.首先是内部元素需要设置宽高

*2.元素需要同行显示

*3.元素需要居中

分析：如果想对一个元素设置宽高，那么元素类型就不能够是行内元素，只能够是块状元素）

*如果内部开始为块状元素时，如p元素，只能使用float使其同行显示(float又会改变显示模式)，但如果进行居中处理，则会发现margin:0 auto;属性失效

*如果内部初始为行内元素，因为不能设置宽高，势必会将其转化为块状元素，即display:block;然后float:left，此时发现父级元素的text-align:center居中属性也失效了

具体看一个实例

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

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

效果如下：

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

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

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

此处使用span标签进行试验

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

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

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

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

接下来看解决办法

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

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

效果如图

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

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

一般通常会在内部这几个标签外部套一个div或其他标签，更好的控制

使用到的display:inline-block这个是什么意思呢？

它指的是将本身设置成为block显示类型，将自己的父元素设置为inline显示类型。再在外层的大框上加上text-align:center即可以实现元素的居中（注意此时内层的float去掉）

除此之外，我们还可以使用如下代码：

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

</div>

</body>

我们发现也能够实现居中效果，但是其可扩展性较差，如果删除一个p或者添加一个p，则需要对.divs div这个样式里的width进行修改

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

=======================================================================

方法一：

 
   <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>页面元素的水平居中</title>  
 <style type="text/css">  
     * { margin:0; padding:0; list-style:none; font-size:14px; font-family:Tahoma, Geneva, sans-serif; }  
     .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }  
     .clearfix { zoom:1; }  
     a{ text-decoration:none;}  
     h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}  
     /** 包装器，relative */  
     .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }  
     /** relative left 50% */  
     .page { float:left; position:relative; left:50%; }  
     /** relative right 50% */  
     .page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }  
   
 </style>  
 </head>  
 <body>  
 <h1>页面元素的水平居中</h1>  
 <h2>浮动方式：</h2>  
 <div class="wrap clearfix">  
     <ul class="page">  
         <li> <a href="#">上一页</a> </li>  
         <li> <a href="#">1</a> </li>  
         <li> <a href="#">2</a> </li>  
         <li> <a href="#">3</a> </li>  
         <li> <a href="#">4</a> </li>  
         <li> <a href="#">2</a> </li>  
         <li> <a href="#">3</a> </li>  
         <li> <a href="#">2</a> </li>  
         <li> <a href="#">3</a> </li>  
         <li> <a href="#">4</a> </li>  
         <li> <a href="#">5</a> </li>  
         <li> <a href="#">6</a> </li>  
         <li> <a href="#">下一页</a> </li>  
     </ul>  
 </div>  
   
 </body>  
 </html>  
 
 

这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。

方法二：

     Html代码   
     
   
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>页面元素的水平居中</title>  
 <style type="text/css">  
     * { margin:0; padding:0; list-style:none; font-size:14px; }  
     .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }  
     .clearfix { zoom:1; }  
     a{ text-decoration:none;}  
     h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}  
     .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }  
     .inwrap{ float:left; position:relative; left:50%;}  
     .page { float:left; position:relative; left:-50%; }  
     .page li { float:left;margin:0 5px;  }  
     .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}  
 </style>  
 </head>  
 <body>  
 <h1>页面元素的水平居中</h1>  
 <h2>浮动方式：</h2>  
 <div class="wrap clearfix">  
     <div class="inwrap">  
         <ul class="page">  
             <li> <a href="#">上一页</a> </li>  
             <li> <a href="#">1</a> </li>  
             <li> <a href="#">2</a> </li>  
             <li> <a href="#">3</a> </li>  
             <li> <a href="#">4</a> </li>  
             <li> <a href="#">2</a> </li>  
             <li> <a href="#">3</a> </li>  
             <li> <a href="#">2</a> </li>  
             <li> <a href="#">3</a> </li>  
             <li> <a href="#">4</a> </li>  
             <li> <a href="#">5</a> </li>  
             <li> <a href="#">6</a> </li>  
             <li> <a href="#">下一页</a> </li>  
         </ul>  
     </div>  
 </div>  
 </body>  
 </html>  

这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG。举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。

==============================================================================

设置容器的浮动方式为相对定位

然后确定容器的宽高比如宽500 高 300 的层

然后设置层的外边距

[html]view plaincopy 
    
 <!DOCTYPE HTML>  
 <html>  
 <head>  
     <style type="text/css">   
         div{  
             width: 500px;  
             height: 300px;  
             margin: -150px 0 0 -250px;  
             position: absolute;  
             left: 50%;  
             top: 50%;  
             background-color: yellow;   
         }  
     </style>   
 </head>   
 <body>  
     <div>  
         元素居中  
     </div>  
 </body>  
 </html>  

逸少KevinLM

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS 控制浮动元素居中

基本的html结构：12345--> p1p2p3p4p5欲实现效果：浮动元素居中的出现条件：*1.首先是内部元素需要设置宽高*2.元素需要同行显示*3.元素需要居中分析：如果想对一个元素设置宽高，那么元素类型就不能够是行内元素，只能够是块状元素）*如果内部开始为块
复制链接

扫一扫