如何将无序列表在固定宽度的 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>