如何在 CSS 中將無序列表居中而無需父 Div？

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

在CSS 中，將無序列表(

)居中，同時保持左對齊如果不使用父div，對齊清單項目可能會很困難。以下是實現此效果的方法：

提供的程式碼片段（帶有父 div）在 div 上使用 text-align: center 並在 ul 上使用 display: inline-block 來居中列表。但是，此方法需要父 div 包裝器。

要在沒有父 div 的情況下居中無序列表，無法有效使用 margin 和 text-align 等 CSS 屬性，因為

沒有固定的寬度。

解決方案在於設定

;使用 display: table 表現得像表格一樣。這將建立一個類似表格的結構，其中行由清單項目 (
• ) 定義。透過在
  上設定 margin: 0 auto，表格（即清單）將在其包含的元素中居中。

  以下是實現此效果的CSS 程式碼：

  <code class="css">ul {
    display: table;
    margin: 0 auto;
  }</code>

  為了演示，這裡有一個使用提供的HTML 但沒有父級div 的程式碼片段：

  <code class="html">
  
  
    <ul>
      <li>56456456</li>
      <li>4564564564564649999999999999999999999999999996</li>
      <li>45645</li>
    </ul>
  
  
  </code>

  此程式碼將使無序列表在頁面上居中，同時仍保持列表項左對齊。

以上是如何在 CSS 中將無序列表居中而無需父 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！