Html 如何将 <ul> <li> 居中到 div

How can I center <ul> <li> into div

提问by menardmam

How can I center an unordered list of <li>into a fixed-width div?

如何将无序列表居中<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="#">[phone]</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:[email protected]">    [email protected]</a></p></td>
  </tr>
  </tbody>
</table>

回答by Aram Kocharyan

To center the ul and also have the li elements centered in it as well, and make the width of the ul change dynamically, use display: inline-block; and wrap it in a centered div.

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

Update

更新

Here is a jsFiddle linkto the code above.

这是上面代码的 jsFiddle 链接。

回答by Quentin

Since uland lielements are display: blockby default — give them auto margins and a width that is smaller than their container.

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

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

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

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

回答by Christian Michael

I love flexbox:

我喜欢 flexbox：

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

回答by Dashrath

Steps :

脚步 ：

1. Write style="text-align:center;"to parent divof ul
2. Write style="display:inline-table;"to ul
3. Write style="display:inline;"to li

1. 写style="text-align:center;"于母公司div的ul
2. 写信style="display:inline-table;"给ul
3. 写信style="display:inline;"给li

or use

或使用

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

回答by DSA Web Specialists

This is a better way to center UL's inside of any DIV container.

这是将 UL 集中在任何 DIV 容器内的更好方法。

This CSS solution does not use Width and Float properties.Float:Left and Width: 70%, will cause you headaches when you need to duplicate your menu on different pages with different menu items.

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

Instead of using width, we use padding and margin to determine the space around the text/menu item. Also, instead of using Float:Left in the LI element, use display:inline-block.

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

By floating your LI left, you literally float your content to the left and then you must use one of the Hacks mentioned above to center your UL. Display:inline-block creates your Float property for you (sort of). It takes your LI element and turns it into a block element that lays side by side each other (not floating).

通过将 LI 向左浮动，您实际上将内容向左浮动，然后您必须使用上面提到的其中一种技巧来使 UL 居中。Display:inline-block 为您创建 Float 属性（有点）。它接受你的 LI 元素并将它变成一个并排放置的块元素（不浮动）。

With Responsive design and using frameworks like Bootstrap or Foundation, there will be issues when trying to float and center content. They have some built-in classes, but it's always better to do it from scratch. This solution is much better for dynamic menus (Such as Adobe Business Catalyst menu system).

使用响应式设计并使用 Bootstrap 或 Foundation 等框架，在尝试浮动和居中内容时会出现问题。他们有一些内置类，但从头开始总是更好。此解决方案对于动态菜单（例如 Adob​​e Business Catalyst 菜单系统）要好得多。

Reference for this tutorial can be found at: http://html-tuts.com/center-div-image-table-ul-inside-div/

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

HTML

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

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

回答by F.P

Could either be

可以是

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

or

或者

div li
{
text-align: center;
}

depends on how it should look like (or combining those)

取决于它应该是什么样子（或组合这些）

回答by anddoutoi

To center a block object (e.g. the ul) you need to set a width on it and then you can set that objects left and right margins to auto.

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

To center the inline content of block object (e.g. the inline content of li) you can set the css property text-align: center;.

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

回答by Keir

Try

尝试

div#divID ul {margin:0 auto;}

回答by Jonny Haynes

Just add text-align: center;to your <ul>. Problem solved.

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

回答by Plippie

Interesting but try this with floated li elements inside the ul: Example here

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

The problem now: the ul needs a fixed width to actually sit in the center. However we want to be it relative to the container width (or dynamic), margin: 0 auto on the ul does not work.

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

A better way is to let go of UL/Li list and use a different approach example here

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