我最近开始学习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;

澄清这是我在问什么 enter image description here

来源

2014-05-01 lonewaft

更改以下行：

padding: 10px 10px;

到

padding: 6px 10px 10px;

居中li S，你必须手动调整填充。这与你在家庭标志上的图片的高度有关。如果保持在30px，那么您需要进行调整，因为它会影响li的高度，其高度为100％（表示文本将调整为图片的高度）。因此，根据所用图片的大小，您需要指定padding-top，因为图片会向下流动（大于它应居中的大小）。

fiddle

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

来源

2014-05-01 03:51:30 royhowie

谢谢！这固定它。还有一个问题，当CSS对齐图片时，它是基于图片中间还是图片底部对齐？ – lonewaft

@lonewaft这个[website]（http://www.impressivewebs.com/css-vertical-align/）在'vertical-align'上有一个很好的写法。请注意，“垂直对齐”仅适用于“内联”或“块”元素，因为您已将它应用于链接，而不是图像，它将基于该元素（链接）居中。由于图像大于'父母'的'

...

'，它会向下溢出。 – royhowie

它在谷歌是完美的人，只是因为小“G”你觉得它像它触及到了底部边框。

这是因为'g'的字符形成，你会得到'q'的相同效果。

您的CSS非常完美。

来源

2014-05-01 03:48:03 user3591579

我希望哈哈，但我认为我不清楚我谈论的是哪个边缘感到抱歉，现在在帖子中用一个图像来澄清。 – lonewaft

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

回答

fiddle

相关问题