在網頁設計中，會經常碰到讓父級下的子元素居中的問題，雖然這是個簡單的問題，但是，有時一不小心就不能正常讓子元素水平居中，那么，在網頁設計中如何讓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 中有空格的請自行刪除測試，本文演示是為了防止上面代碼不被后臺編輯器解析。

上一篇：網頁中只渲染日期不顯示時間的解決方法

下一篇：簡潔的選項卡聯動-[mouseenter]