css - 在垂直菜单中水平居中链接图像

Question

努力学习 html/css 我遇到了一个有多种解决方案的问题，但我不知道哪个是清晰正确代码的最佳解决方案。

我想将垂直菜单中的链接(图像)水平居中。此菜单必须包含在具有固定高度和宽度的 div 中 - #menu。我将使用#menu 的高度向下推另一个 div。

我在网上搜索了很多方法:直接使用 UL 和 id，不包含任何 div，包含 UL 的 div，甚至只有 css 中的 div 和 ul，没有 ul 的任何格式li 或 ul li a. 我的脑子现在一团糟。 在某个时候我决定这样做，但我很确定这不是最好和最简单的方法:

http://jsfiddle.net/luisse/hpLQ6/

html代码:

<div id="content">
<div id="menu">
<ul>
<li><a href="#"><img src="http://i.imgur.com/Cgl5XKV.jpg"></a></li>
<li><a href="#"><img src="http://i.imgur.com/Gk93KeN.jpg"></a></li>
<li><a href="#"><img src="http://i.imgur.com/iIk5FoO.jpg"></a></li>
</ul>
</div>
</div>

CSS:

html, body {
height: 100%;
padding: 0;
margin: 5px;
}
body {
background-color:black;
}
* {
margin: 0;
padding: 0;
}


#content {
background-color: #999999;
height: 600px;
width: 100px;
}


#menu {
background-color: #C0C0C0;
width: 60px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style: none;
width: 60px;
display: table;
}
ul li {
height: 20px;
margin-top: 10px;
}
ul li a {
text-decoration: none;
}

你能告诉我最好的方法是什么吗？ 谢谢。

Answer 1

您可以设置 li 使其所有内容居中。 这就是使链接居中所需的全部内容。

ul li {
    text-align:center; 
}

虽然默认情况下 UL 在浏览器中有一些边距，因此将以下内容添加到 ul 可以消除它所具有的奇怪边距。

ul {
    margin:0px;
}