将<ul> <li>放入div中
经过一番search之后，我没有find正确的方法将<li>的列表放在固定宽度的div 。
看看网页 ..它也不工作！
由于ul和li元素display: block默认情况下为display: block – 给它们自动边距和比它们的容器小的宽度 。
ul { width: 70%; margin: auto; }
如果你已经改变了他们的显示属性，或者做了一些覆盖正常alignment规则的东西（比如浮动它们），那么这是行不通的。
以ul为中心， 同样也有以li为中心的元素 ，并使ul的宽度dynamic变化，使用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链接到上面的代码。
脚步 ：
- 写作
style="text-align:center;"到ul父母div - 写入
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>
可能是
div ul { width: [INSERT FIXED WIDTH] margin: 0 auto; }
要么
div li { text-align: center; }
取决于它应该是什么样子（或结合）
这是以任何DIV容器为中心UL的更好的方法。
此CSS解决scheme不使用宽度和浮动属性。 浮动：左和宽度：70％，当你需要在不同菜单项目的不同页面上复制你的菜单时，会令你头疼。
我们使用填充和边距来确定文本/菜单项周围的空间，而不是使用宽度。 另外，不要在LI元素中使用Float：Left，而应使用display：inline-block。
通过将你的LI留下来，你可以将你的内容向左移动，然后你必须使用上面提到的Hacks中的一个来使你的UL居中。 显示：inline-block为你创build你的Float属性（sorting）。 它把你的LI元素变成一个块元素，并排放置（不是浮动的）。
通过响应式devise和使用Bootstrap或Foundation之类的框架，在尝试浮动和居中内容时会出现问题。 他们有一些内置的类，但最好从头开始。 此解决scheme对于dynamic菜单（如Adobe Business Catalyst菜单系统）要好得多。
本教程的参考资料可在以下urlfind： 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; }
为了居中块对象（例如ul ），需要在其上设置宽度，然后可以将该对象的左右边距设置为自动。
要将块对象的内联内容居中（例如li的内联内容），可以设置css属性text-align: center; 。
尝试
div#divID ul {margin:0 auto;}
只需添加text-align: center; 到你的<ul> 。 问题解决了。
有趣的，但尝试这与ul里面的浮动li元素： 这里的例子
现在的问题是：ul需要一个固定的宽度才能真正坐在中心。 但是我们想要相对于容器的宽度（或dynamic），ul上的margin：0 auto不起作用。
更好的方法是放开UL / Li列表，并在这里使用不同的方法示例
另一个select是：
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; }
如果你知道ul的宽度，那么你可以简单地将ul的边距设置为0 auto;
这将使ul在包含div的中间alignment
例：
HTML：
<div id="container"> <ul> <li>Item1</li> <li>Item2</li> </ul> <div>
CSS：
#container ul{ width:300px; margin:0 auto; }
这是我能find的解决scheme：
#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; }
<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>
使用oldschool中心标签
<div> <center> <ul> <li>...</li> </ul></center> </div>
🙂
