在頁面布局時(shí)，經(jīng)常會(huì)用到li標(biāo)簽，它可用于列表，導(dǎo)航，選項(xiàng)卡等等，那你知道如何讓ul中的li居中嗎？這篇文章就和大家講講如何讓ul中的li水平居中以及如何讓li內(nèi)容垂直居中。感興趣的朋友繼續(xù)往下看吧。

web前端學(xué)習(xí)：打造全網(wǎng)web前端全棧資料庫(kù)（總目錄）看完學(xué)的更快，掌握的更加牢固，你值得擁有（持續(xù)更新）?zhuanlan.zhihu.com

1、li內(nèi)容垂直居中

flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。當(dāng)設(shè)置它的屬性值為column時(shí)，表示靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，當(dāng)設(shè)置其屬性值為center時(shí)，表示項(xiàng)目位于容器的中心。這樣就可以實(shí)現(xiàn)ul中l(wèi)i內(nèi)容的垂直居中。代碼如下：

HTML部分：

<div class="box"><ul><li>aa</li><li>bb</li><li>cc</li><li>dd</li></ul> </div>

CSS部分：

<style type="text/css">.box{width: 300px;height: 300px;border: 1px solid red;}.box ul{height: 300px;display: flex;flex-direction: column;justify-content: center;}.box ul li{list-style: none;margin: 0 auto;} </style>

效果圖：

2、li內(nèi)容水平居中

flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。當(dāng)設(shè)置它的屬性值為row時(shí)（默認(rèn)值），表示靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣。 justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，當(dāng)設(shè)置其屬性值為center時(shí)，表示項(xiàng)目位于容器的中心。這樣就可以實(shí)現(xiàn)ul中l(wèi)i內(nèi)容的水平居中。代碼如下：

HTML部分：

<div class="box"><ul><li>今天心情不錯(cuò)</li><li>今天心情不錯(cuò)</li><li>今天心情不錯(cuò)</li><li>今天心情不錯(cuò)</li></ul> </div>

CSS部分：

<style type="text/css">.box{width: 100%;height: 200px;border: 1px solid #000;}.box ul{height: 200px;display: flex;flex-direction: row;justify-content: center;}.box ul li{list-style: none;height: 200px;line-height: 200px;} </style>

效果圖：

總結(jié)：以上介紹了ul中l(wèi)i標(biāo)簽內(nèi)容居中的方法，如果是垂直居中，就用 flex-direction: column;如果是水平居中，就用flex-direction: row;不了解的小伙伴，可以自己動(dòng)手嘗試，看看你能不能實(shí)現(xiàn)li內(nèi)容居中的效果，希望這個(gè)教程可以幫助到你！

以上就是圖文詳解ul中l(wèi)i內(nèi)容垂直居中和水平居中的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注我哦！！！！！！

總結(jié)

以上是生活随笔為你收集整理的前端中全部盒子靠左对齐_图文详解ul中li内容垂直居中和水平居中的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。