浮动元素的水平居中

2011-03-15 html/css Der 10 条评论 Tags: 浮动元素水平居中 Views: 2,565

对于页面上的块级元素，只须定宽及设置margin:0 auto;即可在水平上居中，但对于浮动的元素水平居中是无效的，一个典型的应用就是页面的分页效果了，看如下图：

这种分页效果，在以往可能会采取设置inline-block，然后父容器设置text-align:center方式来实现内容居中，像如下代码：

提示：你可以先修改部分代码再运行。

这种设置inline-block的缺点是，元素需要设置vertical-align:middle，并且ie下不能完美对齐，以及元素间有空白符等。。
所以可以考虑用float方式代替inline-block，优点是float的元素盒模型好控制，无空白符等等。
代码如下：

<!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;} .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; } .page { float:left; position:relative; left:50%; } .page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; } .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; } .page2{ text-align:center;} .page2 a{ display:inline-block;padding:2px 9px; background:white; border:1px solid red; vertical-align:middle;} </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> <h2>inline-block方式：</h2> <div class="wrap page2"> <a href="#">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">下一页</a> </div> </body> </html>

提示：你可以先修改部分代码再运行。

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

这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG，如下代码：

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

提示：你可以先修改部分代码再运行。

举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。

共10条评论

濯焰发表于： 2011/04/19 上午 4:02 回复

空隙可以用letter-spacing:-3px; font-size:0;来实现
army8735 发表于： 2011/04/23 下午 2:26 回复

不错。原来你去了淘宝……
- Der 发表于： 2011/04/28 上午 5:15 回复
  
  呵，是啊~~
卡,卡发表于： 2011/05/07 下午 1:06 回复

博客确实需要一种态度风格
wyysf 发表于： 2011/06/23 上午 3:37 回复

兄弟你的runcode插件在wp3.0下可以使用啊？我的好像不能用了！能指点一下我吗？
wyysf 发表于： 2011/06/23 上午 3:41 回复

display:inline-block;a标签之间有空隙是由于a标签换行造成的，可以使用在a标签的父级元素设置font-size:0;针对chrome浏览器最小字体12px可以使用-webkit-text-size-adjust:none;来解决，这个布局就是结构特别简单！本人一般使用这个！
- Der 发表于： 2011/07/07 上午 11:53 回复
  
  设置font-size:0确实可以，但ie下还是一像素左右的距离，在不太要求精度的情况下，是个不错的解决方案，另外inline-block在控制对齐的时候确实麻烦，不如float来得精准。
  - wyysf 发表于： 2011/07/23 上午 8:29 回复
    
    确实inline-block在控制对齐的时候是很恶心的！
分子如梦发表于： 2011/07/18 上午 2:20 回复

nihaile
小前端发表于： 2012/01/14 上午 8:59 回复

发本文的链接给朋友朋友电脑有金山毒霸。金山毒霸那2B说崇志的网站是冒充腾讯的钓鱼网站…我表示金山坑爹呢！

Der's Blog

学无止境－专注于html、css、js等前端技术