css li水平居中對齊的方法：首先建立一個HTML範例檔案；然後定義好li標籤；最後透過「overflow: hidden;margin: 100px auto;」等屬性實作水平居中對齊即可。
本文操作環境：windows7系統、HTML5&&CSS3版，DELL G3電腦。
css實作多列li元素水平居中效果的方法
分享一段程式碼實例，它實作了讓多列li元素水平居中效果。
這裡的水平居中其實也就是li元素均勻分佈效果。
程式碼實例如下:
<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 1180px;
height: auto;
margin: 100px auto;
border: 1px solid #f00;
overflow: hidden;
}
.main ul {
width: 1120px;
list-style: none;
margin: 0 auto;
}
.main ul li {
width: 100px;
height: 100px;
margin-right: 20px;
margin: 20px;
background: #f00;
float: left;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>效果圖：
#上面的程式碼實作了我們的要求，下面簡單介紹一下它的實現原理。
設定ul元素的寬度等於li元素的寬度和加上外邊距的值，假設這個值是用w來表示。
ul的父元素的寬度是w-margin-right（20px），而此父元素具有overflow:hidden屬性，那麼超出的外邊距就會被隱藏。
推薦：《css影片教學》
以上是css li怎麼水平居中對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！