终于实现了让ul里面的li水平居中如何让li在ul中水平居中 li的宽度任意设置

CSS技巧：水平居中任意宽度LI

最新推荐文章于 2023-11-24 18:39:44 发布

原创最新推荐文章于 2023-11-24 18:39:44 发布 · 6.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#li水平居中

本文介绍了一种使用CSS实现UL内LI元素任意宽度且始终保持水平居中的方法。关键是通过设置ul的display属性为table，并结合margin:0 auto来实现水平居中效果。此外，还利用了浮动使LI元素横向排列。

部署运行你感兴趣的模型镜像

实现li的宽度任意设置，总是在ul中水平居中，实现结果：
在这里插入图片描述

关键一点就是给ul设置display:table;
上代码：

css样式：
	* {/*重置样式*/
            margin: 0;
            padding: 0;
            list-style: none;
            color: #fff;
            text-decoration: none;
        }
        .wrapper {
            background: #008c8c;
            border: 1px solid #000;
        }
        .wrapper ul {
            display: table;		 /*这里是关键步骤：*/
            margin: 0 auto;      /*让ul在div中水平居中 */
            border: 1px solid #f00;
        }
        .wrapper ul::after {     /*清除浮动 */
            content: '';
            display: inline-block;
            clear: both;
        }
        .wrapper ul li {
            float: left;         /*让li浮动起来 横向排列*/
            text-align: center;  /*让li在ul中水平居中*/
            height: 40px;
            line-height: 40px;   /*垂直居中*/
            width: 250px;        /*任意设置li的宽度，不设置宽度的话也可以设置padding*/
        }

htmlCode:

 <div class="wrapper">
        <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>

您可能感兴趣的与本文相关的镜像

Dify

AI应用

Agent编排

Dify 是一款开源的大语言模型（LLM）应用开发平台，它结合了后端即服务(Backend as a Service) 和LLMOps 的理念，让开发者能快速、高效地构建和部署生产级的生成式AI应用。它提供了包含模型兼容支持、Prompt 编排界面、RAG 引擎、Agent 框架、工作流编排等核心技术栈，并且提供了易用的界面和API，让技术和非技术人员都能参与到AI应用的开发过程中