如何將無序列表在固定寬度的 Div 中居中？

使用

將無序列表(

) 居中固定寬度Div 中的元素

該場景涉及居中包含

• 的無序列表(
  )固定寬度的div 內的元素。為了實現這一點，我們將採用 CSS 和 div 元素的組合。

  解

  1. 將
     包裹起來。在類別為“wrapper”的 div 中。

  2. 將以下CSS 樣式套用到「wrapper」類別：

     .wrapper {
         text-align: center;
     }

     這會將「wrapper」div 置中並對齊

  3. 將下列CSS 樣式套用於

     在「wrapper」類別中：

     .wrapper ul {
         display: inline-block;
         margin: 0;
         padding: 0;
         /* IE support */
         zoom: 1;
         *display: inline;
     }

     這使得

     行為類似於內聯元素，並允許其根據其內容動態擴展。

  4. 將以下CSS 樣式應用到

  5. ;
     中的元素：

     .wrapper li {
         float: left;
         padding: 2px 5px;
         border: 1px solid black;
     }

     這確保了

  6. 元素漂浮在
     內部並水平對齊。

  程式碼範例

  <style>
      .wrapper {
          text-align: center;
      }
      .wrapper ul {
          display: inline-block;
          margin: 0;
          padding: 0;
          zoom: 1;
          *display: inline;
      }
      .wrapper li {
          float: left;
          padding: 2px 5px;
          border: 1px solid black;
      }
  </style>
  
  <div class="wrapper">
      <ul>
          <li>Element 1</li>
          <li>Element 2</li>
          <li>Element 3</li>
      </ul>
  </div>

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