blocks|key|1411743|text|由于ul和li元素在缺省情况下都是display:+block，因此将它们命名为auto+margins+and+a+width+that+is+smaller+than+their+container。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411744|ul+{
++++width:+70%25;
++++margin:+auto;
}|code-block|syntax|javascript|1411745|如果您已经更改了它们的显示属性，或者做了一些覆盖正常对齐规则的操作(例如浮动它们)，那么这将不起作用。|1411746|entityMap|0|LINK|mutability|MUTABLE|url|http://dorward.me.uk/www/centre/^0|2|2|5|2|H|E|14|1P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Since <code>ul</code> and <code>li</code> elements are <code>display: block</code> by default — give them <a href="http://dorward.me.uk/www/centre/" rel="noreferrer">auto margins and a width that is smaller than their container</a>.</p>

<pre><code>ul {
    width: 70%;
    margin: auto;
}
</code></pre>

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


blocks|key|1412330|text|我喜欢flexbox：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412331|ul+{
++justify-content:+center;
++display:+flex;
}|code-block|syntax|javascript|1412332|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I love flexbox:</p>

<pre><code>ul {
  justify-content: center;
  display: flex;
}
</code></pre>


blocks|key|1412087|text|可能是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412088|div+ul
{
+width:+[INSERT+FIXED+WIDTH]
+margin:+0+auto;
}|code-block|syntax|javascript|1412089|或|1412090|div+li
{
text-align:+center;
}|1412091|这取决于它应该是什么样子(或者组合它们)|1412092|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Could either be</p>

<pre><code>div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}
</code></pre>

<p>or</p>

<pre><code>div li
{
text-align: center;
}
</code></pre>

<p>depends on how it should look like (or combining those)</p>


blocks|key|1411833|text|为了居中一个块对象(例如ul)，你需要在它上面设置一个宽度，然后你可以将该对象的左右边距设置为自动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411834|要将块对象的内联内容(例如li的内联内容)居中，可以设置css属性text-align:+center;。|1411835|entityMap^0|C|2|0|D|2|X|J|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

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

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


blocks|key|1411708|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411709|div#divID+ul+{margin:0+auto;}|code-block|syntax|javascript|1411710|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try </p>

<pre><code>div#divID ul {margin:0 auto;}
</code></pre>


blocks|key|1196895|text|只需在<ul>中添加text-align:+center;即可。问题解决了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196896|entityMap^0|3|4|A|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Just add <code>text-align: center;</code> to your <code>&lt;ul&gt;</code>. Problem solved.</p>


blocks|key|1197021|text|有趣的是，可以尝试在ul：Example+here中使用浮动的li元素|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1197022|现在的问题是:+ul需要一个固定的宽度才能真正坐在中间。然而，我们希望它相对于容器宽度(或动态)，在ul上自动边距:0不起作用。|1197023|更好的方法是放弃UL/Li列表，并使用不同的方法example+here|1197024|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Q9z3X/|1|http://jsfiddle.net/Q9z3X/2/^0|D|C|0|0|0|O|C|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>Interesting but try this with floated li elements inside the ul:
<a href="http://jsfiddle.net/Q9z3X/" rel="nofollow">Example here</a></p>

<p>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.</p>

<p>A better way is to let go of UL/Li list and use a different approach <a href="http://jsfiddle.net/Q9z3X/2/" rel="nofollow">example here</a></p>


blocks|key|1197101|text|这是我能找到的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1197102|#wrapper+{
++float:right;
++position:relative;
++left:-50%25;
++text-align:left;
}
#wrapper+ul+{
++list-style:none;
++position:relative;
++left:50%25;
}

#wrapper+li{
++float:left;
++position:relative;
}|code-block|syntax|javascript|1197103|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is the solution I could find:</p>

<pre><code>#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;
}
</code></pre>


blocks|key|1412170|text|<div+id="container">
++<table+width="100%25"+height="100%25">
++++<tr>
++++++<td+align="center"+valign="middle">
++++++++<ul>
++++++++++<li>item+1</li>
++++++++++<li>item+2</li>
++++++++++<li>item+3</li>
++++++++</ul>
++++++</td>
++++</tr>
++</table>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1412171|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1412124|text|使用老式的center-tag|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412125|<div>+<center>+<ul>+<li>...</li>+</ul></center>+</div>|code-block|syntax|javascript|1412126|:-)|1412127|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>use oldschool center-tags </p>

<pre><code>&lt;div&gt; &lt;center&gt; &lt;ul&gt; &lt;li&gt;...&lt;/li&gt; &lt;/ul&gt;&lt;/center&gt; &lt;/div&gt;
</code></pre>

<p>:-)</p>


<p>How can I center an unordered list of <code>&lt;li&gt;</code> into a fixed-width <code>div</code>?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table width="100%"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
    &lt;td width="41%"&gt;&lt;img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"&gt;&lt;/td&gt;
    &lt;td width="59%"&gt;&lt;p align="left"&gt;&amp;nbsp;&lt;/p&gt;
      &lt;h1 align="left"&gt;StudioTeknik.com&lt;/h1&gt;
      &lt;p&gt;&lt;br align="left"&gt;
        &lt;strong&gt;Marc-André Ménard&lt;/strong&gt;&lt;/p&gt;
      &lt;ul&gt;
        &lt;li&gt;Photographie digitale&lt;/li&gt;
        &lt;li&gt;Infographie &lt;/li&gt;
        &lt;li&gt;Débug et IT (MAC et PC)&lt;/li&gt;
        &lt;li&gt; Retouche &lt;/li&gt;
        &lt;li&gt;Site internet&lt;/li&gt;
        &lt;li&gt;Graphisme&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p align="left"&gt;&lt;span class="style1"&gt;&lt;strong&gt;Cellulaire en suisse : &lt;/strong&gt;&lt;/span&gt;&lt;a href="#"&gt;+41 079 573 48 99&lt;/a&gt;&lt;/p&gt;
      &lt;p align="left"&gt;&lt;strong class="style1"&gt;Skype : &lt;/strong&gt; &lt;a href="#"&gt;menardmam&lt;/a&gt;&lt;/p&gt;
    &lt;p align="left"&gt;&lt;strong class="style1"&gt;Courriel :&lt;/strong&gt;&lt;a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com"&gt;    info@studioteknik.com&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


How can I center <ul> <li> into a 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="4

问如何将<ul> <li>居中放置到div中？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将<ul> <li>居中放置到div中？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将<ul> <li>居中放置到div中？
EN