html - 垂直对齐 : middle is slightly off at the top

Question

我最近开始学习 CSS，但遇到了一些我无法理解的问题。 http://jsfiddle.net/HDKsq/7/是我的 fiddle 。我正在尝试将导航栏中的按钮设置为在垂直中间完美对齐。这些按钮是无序列表中的元素，我将它们设置为 vertical-align:middle;但是按钮顶部的空间明显大于底部，我使用的语法错误吗？

ul li{
list-style:none;
display:table-cell;
vertical-align: middle;
border: 2px solid white;
padding-right : 10px;
padding-left: 10px;
background-color:black;
border-radius:6px;
line-height:100%;
text-align:center;
width: 150px;

为了澄清，这就是我要问的

Answer 1

更改以下行:

padding: 10px 10px;

到

padding: 6px 10px 10px;

要使 li 居中，您必须手动调整内边距。这与主页 Logo 图片的高度有关。如果它保持在 30px，那么您需要进行调整，因为它会影响 li 的高度，它的行高为 100%(这意味着文本将调整为图片的高度) .因此，根据所用图片的大小，您需要指定 padding-top，因为图片会向下流动(它比居中的尺寸大)。

fiddle

请原谅我使用占位符小猫。我希望你不会喜极而泣。