如何将无序列表在固定宽度的 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中文网其他相关文章！