如何将<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"> </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:[email protected]"> [email protected]</a></p></td>
</tr>
</tbody>
</table>
由于ul
和li
元素默认为display: block
-将它们赋予auto margins and a width that is smaller than their container。
ul {
width: 70%;
margin: auto;
}
如果您更改了它们的显示属性,或做了一些覆盖常规对齐规则的操作(例如浮动它们),则此操作将无效。
有趣,但可以使用ul中的浮动li元素来尝试:Example here
现在的问题:ul需要固定宽度才能实际位于中央。但是,我们要相对于容器宽度(或动态宽度)设置它,边距:ul上的0 auto不起作用。
更好的方法是放开UL / Li列表并使用其他方法example here
如果您知道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;
}
这是我可以找到的解决方案:
#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;
}
另一个选择是:
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;
}
我一直在寻找相同的情况,并通过更改<li>
的宽度尝试了所有答案。不幸的是,所有人都没有在<ul>
框的左侧和右侧获得相同的距离。
最接近的匹配是this answer,但需要使用填充调整宽度的变化] >>
.container ul {
...
padding: 10px 25px;
}
.container li {
...
width: 100px;
}
您可以在此jsFiddle上进行检查:http://jsfiddle.net/qwbexxog/14/
<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中心标签
要使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>
更新
Here is a jsFiddle link至以上代码。
我爱flexbox:
ul {
justify-content: center;
display: flex;
}
步骤:
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>
这是将UL内部置于任何DIV容器内部的一种更好的方法。
此CSS解决方案不使用Width和Float属性。 Float:Left和Width:70%,当您需要在具有不同菜单项的不同页面上复制菜单时,将使您头痛。
而不是使用宽度,我们使用填充和边距来确定文本/菜单项周围的空间。另外,不要在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;
}
可能是
div ul
{
width: [INSERT FIXED WIDTH]
margin: 0 auto;
}
或
div li
{
text-align: center;
}
取决于它的外观(或结合起来)
要使块对象(例如ul
)居中,您需要在其上设置宽度,然后可以将对象的左右边距设置为自动。
要使块对象的内联内容(例如li
的内联内容居中,可以设置css属性text-align: center;
。
尝试
div#divID ul {margin:0 auto;}
只需将text-align: center;
添加到<ul>
。问题已解决。