CSS中,如果想要讓li列表項水平居中,我們可以使用以下方法:
ul { text-align: center; } li { display: inline-block; margin: 0 10px; }
上述代碼中,我們首先將ul的文本對齊方式設置為居中,然后將li的展示方式設置為內聯塊元素,以便可以讓多個li并排顯示。接著通過設置margin屬性來控制li之間的間距,從而達到水平居中的效果。
當然,如果我們希望li列表項不僅可以在水平方向上居中,還需在垂直方向上居中的話,我們可以使用以下代碼:
ul { display: flex; justify-content: center; align-items: center; } li { margin: 0 10px; }
上述代碼中,我們首先將ul的展示方式設置為彈性布局,并設置justify-content和align-items屬性分別為center,這樣便可以使ul以及其內部的li都水平垂直居中。而li的margin屬性則用來控制li之間的間距,不影響居中效果。
上一篇css li擺放圖片
下一篇css3圖片遮罩特效