如何在沒有父 div 的情況下將無序列表居中？-css教學-PHP中文網

如何在沒有父 div 的情況下將無序列表居中？

Mary-Kate Olsen

發布： 2024-10-31 08:17:30

原創

753 人瀏覽過

How to Center an Unordered List Without a Parent Div?

將無序列表與左對齊列表項居中

在網頁設計中，經常需要將無序列表居中，同時保持列表項左對齊。通常，這是使用包裝器

來實現的。文字對齊：居中；以及

的情況下將無序列表居中的挑戰。

為了實現這一點，必須採取非常規的方法。一個解決方案是利用 display: table;財產。它將

以下是此解決方案的程式碼片段：

<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中文網其他相關文章！