在頁面佈局時,經常會用到li標籤,它可用於列表,導航,選項卡等等,那你知道如何讓ul中的li居中嗎?這篇文章就和大家講講如何讓ul中的li水平居中以及如何讓li內容垂直居中。有興趣的朋友繼續往下看吧。
1、li內容垂直居中
flex-direction 屬性規定靈活項目的方向。當設定它的屬性值為column時,表示靈活的項目將垂直顯示,正如一個欄位一樣。 justify-content 用於設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式,當設定其屬性值為center時,表示項目位於容器的中心。這樣就可以實現ul中li內容的垂直居中。程式碼如下:
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內容水平居中
flex-direction 屬性規定靈活項目的方向。當設定它的屬性值為row時(預設值),表示靈活的項目將水平顯示,正如一個行一樣。 justify-content 用於設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式,當設定其屬性值為center時,表示項目位於容器的中心。這樣就可以實現ul中li內容的水平居中。程式碼如下:
HTML部分:
<div class="box"> <ul> <li>今天心情不错</li> <li>今天心情不错</li> <li>今天心情不错</li> <li>今天心情不错</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>
效果圖:
總結:以上介紹了ul中li標籤內容居中的方法,如果是垂直居中,就用 flex-direction: column;如果是水平居中,就用flex-direction: row;不了解的小伙伴,可以自己動手嘗試,看看能不能實現li內容居中的效果,希望這個教學可以幫助你!
以上是圖文詳解ul中li內容垂直居中和水平居中的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!