Question

努力学习html / css我遇到了多个解决方案的问题，但我没有想法，这是一个清晰正确的代码的最佳解决方案。

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

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

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

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

1 个答案: