如何使用 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中文网其他相关文章！