浮动元素水平居中

浮动元素的水平居中

展开/收缩

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

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

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

< !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; } .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>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>

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

[继续阅读全文...]

Der's Blog

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

浮动元素的水平居中