如何將未知寬度的無序列表水平置中？

將未知寬度的無序列表水平居中

當使用一組表示為無序列表的連結建立頁腳時，通常會出現以下情況：最好將清單在頁腳div 內水平居中。雖然將文字元素或已知寬度的元素居中很簡單，但將未知寬度的無序列表居中卻是一個挑戰。

內嵌列表項目

如果列表項目可以內聯顯示，解決方案很簡單：

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

阻止列表項

但是，在某些情況下，可能需要使用display: block;在清單項目上。在這種情況下，需要稍微複雜一點的解決方案：

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

此CSS 將無序列表放置在頁腳div 的中心，並偏移列表項，以便它們在列表內水平對齊。

以上是如何將未知寬度的無序列表水平置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！