你的位置:首页 > 网页设计

[网页设计]不固定宽度的盒子的水平居中

可用于制作分页标签. 如:

方法一: 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 ></div>  <ul>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>  </ul>  <div ></div>  <ul>    <li><a href="#">1</a></li>  </ul></div></body></html>