垂直对齐：中间略微偏离顶部

Question

我最近开始学习CSS，而且我遇到了一些我无法弄清楚的东西。 http://jsfiddle.net/HDKsq/7/是我的小提琴。 我试图将导航栏中的按钮设置为在垂直中间完美对齐。按钮是无序列表中的元素，我将它们设置为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居中，您必须手动调整填充。这与您对主页徽标的图片高度有关。如果它保持在30px，那么你需要调整，因为它影响li的高度，其高度为100％（意味着文本将调整到图片的高度）。因此，根据所用图片的大小，您需要指定padding-top，因为图片将向下流动（它大于应该居中的大小）。

fiddle

请原谅我使用占位符小猫。我希望你不要为喜悦而流泪。

Answer 2

这是一个完美的男人，只因为小小的＆＃39;在谷歌，你觉得它喜欢它触摸到底部边界。

这是因为＆＃39; g＆＃39;的字符形成，你会得到同样的效果。

你的CSS很完美。