首页 > 其他 > 详细

不固定宽度的盒子的水平居中

时间:2017-08-12 00:19:54      阅读:271      评论:0      收藏:0      [点我收藏+]

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

技术分享

方法一: 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>

  

  

不固定宽度的盒子的水平居中

原文:http://www.cnblogs.com/yqlycys/p/7348437.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!