CSS ul如何居中對齊 在網站制作過程中，我們經常需要使用無序列表（ul）來展示一些信息或者導航條等功能。而在某些情況下，我們希望ul能夠水平居中對齊，本文就將為大家介紹使用CSS如何實現此功能。 首先，我們需要明確一點，ul是一個塊狀元素，它的默認寬度是100%，不能直接使用text-align屬性讓其中的內容居中。但是，我們可以利用CSS中的flex布局來實現ul的居中對齊。 方法一： 使用display:flex;和justify-content:center;屬性。 實現代碼如下： pre { color: #4d4d4d; display: block; font-weight: 400; font-family: 'SF Mono','Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Courier, monospace; background-color: #f5f5f5; padding: 10px; margin-block-start: 1em; margin-block-end: 1em; border: 1px solid #ccc; } pre code { display: block; padding: 0; } ul { list-style: none; display: flex; justify-content: center; } li{ margin-right:10px; } 上述代碼中，我們使用了display:flex;讓ul變為一個flex容器，使用justify-content:center;讓其中的子元素居中對齊。此處需要注意的是，li元素的margin-right屬性的值必須要大于0，才能夠使flex布局生效。 方法二： 使用margin:auto;和text-align:center;屬性。 實現代碼如下： ul { list-style: none; margin: auto; text-align: center; } 上述代碼中，我們利用了margin:auto;讓ul元素水平居中對齊，利用text-align:center;讓其中的子元素居中對齊。 總結： 在使用CSS對ul元素進行居中對齊時，我們可以利用flex布局或者margin:auto;和text-align:center;屬性來實現。不同的需求可以選擇不同的方案，但需要注意的是，子元素的margin屬性值必須要大于0，才能夠讓flex布局生效。希望本文能夠對大家有所幫助！