logo标签列表

如何将 <ul> <li> 居中到一个 div 中？

csshtmlhtml-lists
108

如何将一个无序列表<li>在固定宽度的div中居中显示？

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

16个回答
173

要让

    居中并且
  • 元素也在其中居中，同时使
      的宽度可以动态改变，可以使用display: inline-block;并将其包在一个居中的
      中。

      <style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

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

      更新

      这里是上述代码的jsFiddle链接。

这就是我在其他解决方案中遇到的问题，如果我更改了li元素，它就无法工作。 - Aram Kocharyan
我正在使用这个Bootstrap 3导航，并需要在ul中添加float: none;。 - Dylan Valade
152

由于默认情况下 ul 和 li 元素的显示属性为 display: block，因此给它们设置 自动外边距和小于其容器的宽度。

ul {
    width: 70%;
    margin: auto;
}

如果您更改了它们的display属性，或者执行了覆盖正常对齐规则（例如浮动它们）的操作，则此方法将不起作用。

4
如果这个不能让你高兴，那这个可能会：https://dev59.com/0HE85IYBdhLWcg3wQxLG - Bruiser
12
设置 width:auto; 和 display:inline-block; 可以让您的 ul 行为像一行文本。然后，您可以在父元素上使用 text-align:center;。这也允许您的 ul 随着内部内容的变化而增长和缩小，而不是具有固定宽度。 - i_a
1
@Chetabahana - 你看的是文本，而不是元素：http://jsfiddle.net/qwbexxog/3/ - Quentin
不适用于所有分辨率，flex居中是有效的。 - Srinivas08
64

我喜欢弹性盒子布局：

ul {
  justify-content: center;
  display: flex;
}
24

步骤：

  1. 在 ul 的父级 div 上写入 style="text-align:center;"
  2. 在 ul 上写入 style="display:inline-table;"
  3. 在 li 上写入 style="display:inline;"

或使用：

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>
我们必须添加边距，否则会嵌套在一起，请在此处检查 http://jsfiddle.net/qwbexxog/4/ - eQ19
这个答案救了我！ - Huan
10

这是一种更好的方法，可以将UL居中在任何DIV容器内。

这个CSS解决方案不使用Width和Float属性。在需要在不同页面上复制具有不同菜单项的菜单时，Float:Left和Width: 70%会给您带来麻烦。

我们使用padding和margin来确定文本/菜单项周围的空间，而不是使用width。此外，不要在LI元素中使用Float:Left，而是使用display:inline-block。

通过将LI左浮动，您实际上将内容向左浮动，然后必须使用上面提到的某个Hack来使UL居中。Display:inline-block为您创建了Float属性（有点像）。它将LI元素转换为并排放置的块元素（而不是浮动）。

对于响应式设计和使用Bootstrap或Foundation等框架，尝试浮动和居中内容时会出现问题。它们有一些内置类，但最好从头开始做。这种解决方案非常适用于动态菜单（例如Adobe Business Catalyst菜单系统）。

本教程的参考资料可在以下网址找到：http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}
6

可以是以下两种情况之一：

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

或者

div li
{
text-align: center;
}

取决于它应该看起来像什么（或将它们组合在一起）。
2
后一种选项不会将列表项居中，只会将它们的内联内容居中。 - Quentin
然而，如果<li>没有样式，它看起来是一样的。 - F.P
4

要使块级对象（例如

    ）居中，您需要在其上设置宽度，然后可以将该对象的左右边距设置为自动。

    要使块对象的内联内容（例如

  • 的内联内容）居中，可以设置CSS属性text-align: center;。

1

尝试一下

div#divID ul {margin:0 auto;}
1
只需在您的
    中添加text-align: center;即可解决问题。
1

有趣的是，尝试在ul内部使用浮动的li元素： 这里有个例子

现在的问题是：ul需要一个固定的宽度才能真正居中。然而，我们希望它相对于容器宽度（或动态）来进行调整，ul上的margin: 0 auto不起作用。

更好的方法是放弃UL/Li列表，使用不同的方法这里有个例子

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接