在网页设计中，会经常碰到让父级下的子元素居中的问题，虽然这是个简单的问题，但是，有时一不小心就不能正常让子元素水平居中，那么，在网页设计中如何让ul下的多个li元素居中？一般都是通过个css来设置，注意要点是：ul不能设置宽度，ul上的div可以设置；只适应与同一行水平居中排列，下一行居中排列如上面排列方法一致。

< style>
*{margin: 0; padding: 0;}
ul,li{list-style-type:none;} 
.box1{ width:100%;margin:0px auto; margin-top:30px; /*border:1px solid blue;*/}
.box1 ul{display:table; margin:0px auto; }/*不要设置宽度*/
.box1 ul li{float:left; width:200px; height:100px;text-align:center;margin:0px 10px; background:red; line-height:100px; }
/*.box1 ul li中此处宽度只能设置成固定宽度，不能设置成百分比%宽度*/
< /style>
< div class="box1" >
< ul>
< li>li01< /li>
< li>li02< /li>
< li>li03< /li>
< li>li04< /li>
< li>li05< /li>
< /ul>
< /div>

渲染效果如下：

备注：网站开发者引用本文代码的请注意：标签 style  div  ul li 中有空格的请自行删除测试，本文演示是为了防止上面代码不被后台编辑器解析。

上一篇：低代码框架的核心原理

下一篇：谎称中文域名到期让您续费是变相骗局！