宽度不固定元素水平居中
Posted wmui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了宽度不固定元素水平居中相关的知识，希望对你有一定的参考价值。
元素浮动以后不能通过text-align:center或是margin:0 auto达到居中效果，我们可以这样做是浮动元素居中：为父盒子和子盒子position: relative;然后父盒子left: 50%; 子盒子right:50%;就可以达到居中效果了。
另外如果元素不浮动如何达到居中效果呢。text-align:center;只能居中行内元素，但是往往我们需要居中一个块级盒子，其实也很简单：为父盒子设置text-align:center；为子盒子设置display:inline-block;就可以了，下面是demo
<!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; } 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%; } /* 方案一结束 */ /* 解决方案二 */ .inwrap { text-align: center; } .page { display: inline-block; } /* 方案二结束 */ .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> <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>
以上是关于宽度不固定元素水平居中的主要内容，如果未能解决你的问题，请参考以下文章