css中l(wèi)i水平居中對(duì)齊的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2021-02-18 11:25:11 來源：億速云閱讀：814 作者：小新欄目：web開發(fā)

小編給大家分享一下css中l(wèi)i水平居中對(duì)齊的實(shí)現(xiàn)方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css li水平居中對(duì)齊的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義好li標(biāo)簽；最后通過“overflow: hidden;margin: 100px auto;”等屬性實(shí)現(xiàn)水平居中對(duì)齊即可。

css實(shí)現(xiàn)多列l(wèi)i元素水平居中效果的方法

分享一段代碼實(shí)例，它實(shí)現(xiàn)了讓多列l(wèi)i元素水平居中效果。

這里的水平居中其實(shí)也就是li元素均勻分布效果。

代碼實(shí)例如下:

<!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>

效果圖：

css中l(wèi)i水平居中對(duì)齊的實(shí)現(xiàn)方法

上面的代碼實(shí)現(xiàn)了我們的要求，下面簡(jiǎn)單介紹一下它的實(shí)現(xiàn)原理。

設(shè)置ul元素的寬度等于li元素的寬度和加上外邊距的值，假定這個(gè)值用w來表示。

ul的父元素的寬度是w-margin-right（20px），并且此父元素具有overflow:hidden屬性，那么超出的外邊距就會(huì)被隱藏。

看完了這篇文章，相信你對(duì)“css中l(wèi)i水平居中對(duì)齊的實(shí)現(xiàn)方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

css中l(wèi)i水平居中對(duì)齊的實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽