ul li標籤在頁面中用得很多,今天這篇文章就和大家分享一個li標籤中的小技巧,如何讓ul中li水平垂直居中#,有興趣的朋友可以參考一下,希望對你有用。
我們在寫輪播圖時,底部的小圓點或數字會放在一個ul下li裡,這時候一般都要求小圓點或數字垂直居中,今天就寫一個簡單的li在ul中水平垂直居中。
輪播圖一般有兩種,左右輪播和上下輪播,對應的ul中的li也分為水平排列和垂直排列,以下就針對這兩種情況分別說明。
1、輪播圖左右輪播,li水平排列:
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> .box{ width: 100%; height: 200px; border: 1px solid red; } .box ul{ height: 200px; display: flex; flex-direction: row; justify-content: center; } .box ul li{ list-style: none; height: 200px; line-height: 200px; }
效果:
##2、輪播圖上下輪播,li垂直排列:
<div class="box1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> .box1{ width: 100px; height: 300px; border: 1px solid red; } .box1 ul{ height: 300px; display: flex; flex-direction: column; justify-content: center; } .box1 ul li{ list-style: none; margin: 0 auto; }效果:
以上是圖文詳解如何讓ul中的li水平垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!