如何使用 CSS 將無序列表置於固定寬度 Div 的中心？

網頁設計：將無序列表在固定寬度的 Div 中居中

使用 HTML 元素時，通常需要特定的對齊和大小調整。典型的場景涉及將無序列表 (

) 在具有定義寬度的容器內居中。為了實現這種佈局，我們可以利用 CSS 的強大功能：

解決方案：

將

居中，同時將其
• 單獨居中。元素，在確保動態寬度調整的同時，實現以下策略：

  .wrapper {
      text-align: center;
  }
  
  .wrapper ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      /* Ensure compatibility with older versions of Internet Explorer */
      zoom: 1;
      *display: inline;
  }
  
  .wrapper li {
      float: left;
      padding: 2px 5px;
      border: 1px solid black;
  }

  說明：

  1. .wrapper 類別使用文字將整個列表容器置中-align: center;.
  2. 嵌套的.wrapper ul 使用display: inline-block;,允許
     僅佔用必要的空間，同時保留內聯屬性。它還刪除預設邊距和填充以實現適當的間距。
  3. 對於舊版的 Internet Explorer，縮放：1；確保跨瀏覽器相容性。
  4. *display: inline;將內聯區塊行為套用至 Internet Explorer 6 及更低版本。
  5. 每個
  6. ;元素位於
     的中心。透過設定 float: left; 。添加單獨的內邊距和邊框以增強視覺吸引力。

  實作：

  <div class="wrapper">
      <ul>
          <li>Three</li>
          <li>Blind</li>
          <li>Mice</li>
      </ul>
  </div>

  注意：此解決方案提供最大寬度

  因為其寬度會根據其中的內容動態調整。

  更新：

  有關動手演示，請訪問參考材料中提供的 jsFiddle 連結。

以上是如何使用 CSS 將無序列表置於固定寬度 Div 的中心？的詳細內容。更多資訊請關注PHP中文網其他相關文章！