如何在沒有父 div 的情況下將無序列表居中？
- Mary-Kate Olsen原創
- 2024-10-31 08:17:30643瀏覽
將無序列表與左對齊列表項居中
在網頁設計中，經常需要將無序列表居中，同時保持列表項左對齊。通常，這是使用包裝器
來實現的。文字對齊：居中；以及
- 上的內聯塊樣式。然而，創作者經常面臨在沒有父親
- 的左對齊；元素，消除了對包裝的需要。這是一種簡單且可靠的解決方案，可在複雜佈局中對齊無序列表。
的情況下將無序列表居中的挑戰。
為了實現這一點，必須採取非常規的方法。一個解決方案是利用 display: table;財產。它將
- 轉換為成類似表格的結構，允許列表項目的行為類似於表格單元格。透過將
- 的邊距設為 0 auto;，元素將在其父容器中居中。
以下是此解決方案的程式碼片段：
<code class="CSS">ul {
display: table;
margin: 0 auto;
}</code>
HTML 範例：
<code class="HTML"><html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html></code>
此方法有效地將
- 居中同時保留其
以上是如何在沒有父 div 的情況下將無序列表居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn