不固定宽度的盒子的水平居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不固定宽度的盒子的水平居中相关的知识，希望对你有一定的参考价值。
可用于制作分页标签. 如:
方法一: display: table-cell;
ul{
list-style: none;
display:table;
margin: 40px auto;
}
li{
display:table-cell;
}
方法二: 定位
div{
float: left;
position: relative;
left: 50%;
}
ul{
list-style: none;
position: relative;
left: -50%;
}
li{
width: 20px;
height: 20px;
border: 1px solid gray;
float: left;
}
示例代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #container{ border:1px solid red; } ul{ list-style: none; display:table; margin: 40px auto; } li{ display:table-cell; } li a{ background-color: #ddd; text-decoration: none; padding:5px 8px; } .cl{ clear:both; } </style> </head> <body> <div id="container"> <ul> <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="#">5</a></li> </ul> <div class="cl"></div> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="cl"></div> <ul> <li><a href="#">1</a></li> </ul> </div> </body> </html>
以上是关于不固定宽度的盒子的水平居中的主要内容，如果未能解决你的问题，请参考以下文章