css - 我怎样才能居中

进入一个div？

Question

如何将无序列表居中<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>

score 165 · Accepted Answer

要使 ul居中并使 li 元素也居中，并使 ul 的宽度动态变化，请使用 display: inline-block; 并将其包装在一个居中的 div 中。

<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 链接。

score 146 · Accepted Answer

因为ul和li元素是display: block默认的——给它们自动边距和小于它们的容器的宽度。

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

如果您更改了它们的显示属性，或者做了一些覆盖正常对齐规则的操作（例如浮动它们），那么这将不起作用。

score 52 · Accepted Answer

52

我喜欢弹性盒子：

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

于 2018-06-16T23:00:55.993 回答

score 24 · Accepted Answer

脚步：

写给style="text-align:center;"家长div_ul
写信style="display:inline-table;"给ul
写信style="display:inline;"给li

或使用

<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>

score 10 · Accepted Answer

这是将 UL 置于任何 DIV 容器内部的更好方法。

此 CSS 解决方案不使用 Width 和 Float 属性。Float:Left 和 Width: 70%，当你需要在不同的页面上用不同的菜单项复制你的菜单时会让你头疼。

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

通过将您的 LI 向左浮动，您实际上是向左浮动您的内容，然后您必须使用上面提到的其中一种技巧来使您的 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;
}

score 6 · Accepted Answer

可能是

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

或者

div li
{
text-align: center;
}

取决于它的外观（或结合这些）

score 4 · Accepted Answer

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

要使块对象的内联内容居中（例如的内联内容li），您可以设置 css 属性text-align: center;。

score 1 · Accepted Answer

有趣，但尝试在 ul 中使用浮动的 li 元素：这里的示例

现在的问题：ul 需要一个固定的宽度才能实际位于中心。但是我们希望它相对于容器宽度（或动态），在 ul 上的 margin: 0 auto 不起作用。

更好的方法是放弃 UL/Li 列表并在此处使用不同的方法示例

score 1 · Accepted Answer

1

只需添加text-align: center;到您的<ul>. 问题解决了。

于 2009-11-10T14:46:56.990 回答

score 1 · Accepted Answer

1

尝试

div#divID ul {margin:0 auto;}

于 2009-11-10T13:47:59.223 回答

score 0 · Accepted Answer

另一种选择是：

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>

CSS：

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

score 0 · Accepted Answer

这是我能找到的解决方案：

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

score 0 · Accepted Answer

如果您知道的宽度，ul那么您可以简单地将边缘设置ul为0 auto;

这将ul在包含 div 的中间对齐

例子：

HTML：

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS：

  #container ul{
    width:300px;
    margin:0 auto;
  }

score 0 · Accepted Answer

我一直在寻找相同的案例，并通过更改<li>.
不幸的是，所有人都未能在<ul>盒子的左侧和右侧获得相同的距离。

最接近的匹配是这个答案，但它需要使用填充来调整宽度的变化

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

<li>看下面的结果，到<ul>盒子之间的所有距离都是一样的。

您可以在这个 jsFiddle 上查看：http:
//jsfiddle.net/qwbexxog/14/

score -1 · Accepted Answer

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

score -5 · Accepted Answer

-5

使用老式的中心标签

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)

于 2009-11-10T13:48:56.553 回答

css - 我怎样才能居中 进入一个div？

16 回答 16

Related

Reference

css - 我怎样才能居中

进入一个div？