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

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>

  

  

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

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

元素水平居中

如何使用css让一个已知宽高的盒子垂直水平居中?

当宽度未知时,将图像水平居中并将其垂直放置在 div 内的底部

css常用代码片段 (更新中)

不固定宽度 浮动元素实现 水平居中