无序列表的居中对齐

三个粉丝

于 2021-11-13 09:47:07 发布

阅读量7.7k

点赞数 23

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/csdn_jwdlh/article/details/121299849

本文介绍了两种解决无序列表ul中li元素居中对齐的方法。方法一通过设置li浮动和ul的text-align属性，但需注意清除浮动；方法二则是利用display属性将ul和li设为inline-block，并通过调整父盒子的text-align属性实现居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同学门是不是经常会遇到ul里的li不能居中对齐的情况呢。确实，我也经常遇到。我安静写着代码。突然想起好久没写播客，所以今天它来了。
在这里插入图片描述

解决办法

方法一

1.我们用到无序列表，一般都是li里面包含a标签，就像这样

 <div class="box">
        <ul>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
            <li><a href="">li的居中</a></li>
        </ul>
    </div>

2.然后给li设置浮动，就像这样

 .box ul li {
            float: left;   
            padding: 0 20px;
            margin: 0 10px;
            background-color: rebeccapurple;
            /*任意设置li的宽度，不设置宽度的话也可以设置padding*/
        }

在这里插入图片描述
3.最后就是给ul**设置 **text-align: center;属性了

 .box ul {      
 			text-align: center;  
            border: 1px solid red;
        }

可是最后并没有效果。
在这里插入图片描述
可以看到ul的高度只有2px，这是边框的宽度。因为li有 ** 浮动**的属性。所以要清除浮动。

4.最后让 ul 在盒子里居中显示

.box ul {
            display: table;
            /*这里是关键步骤：*/
            margin: 0 auto;
            /*让ul在div中水平居中 */
            border: 1px solid #f00;
        }

在这里插入图片描述

方法二

1.给ul设置 display: inline-block;属性

 .box ul {
            display: inline-block;
            border: 1px solid #f00;
        }

2.给li设置 display: inline-block;属性

 .box ul li {
            display: inline-block;
            padding: 0 20px;
            margin: 0 10px;
            background-color: rebeccapurple;
        }

3.给父盒子设置text-align: center;属性

 .box {
            background: pink;
            border: 1px solid #000;
            margin-top: 300px;
            text-align: center;
        }

效果：
在这里插入图片描述

溜了溜了

在这里插入图片描述