不固定宽度的盒子的水平居中
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>
以上是关于不固定宽度的盒子的水平居中的主要内容,如果未能解决你的问题,请参考以下文章