0

我无法垂直对齐图像按钮内的文本。垂直对齐：中间似乎不起作用。

到目前为止，我得到了什么：

#navbar ul {
    padding-top: 10px;
    float:left;
}

#navbar li {    
    background-image:url("../images/btns.png");
    width: 78px;
    height:32px;
    float:left;
    text-align: center;
    font-size: 12px;
    list-style:none;
    vertical-align: middle;
}
4

3 回答 3

4

解决这个问题的最简单方法是给出一个与它自己的高度相同的值line-height。li

http://jsfiddle.net/KHBG4/

#navbar ul {
     padding-top: 10px;
     float:left;
 }
 #navbar li {
     background-image:url("http://placehold.it/78x32");
    float:left;
     width: 78px;
     height:32px;
     text-align: center;
     font-size: 12px;
     list-style:none;
     line-height:32px;
 }
于 2013-04-26T19:32:42.263 回答
1

vertical-align只能与内联元素一起使用。话虽如此，我知道 img 标签是“内联块”，所以不太确定那里会发生什么，但我不认为你的意思是垂直对齐 img，而是文本，所以你需要一个单独的内联标签（跨度会很好）并使用“位置”和“垂直对齐”来正确设置它。

我最近有一篇关于这个问题的帖子：

如何在 CSS 2 中调整背景图像的大小以适合我的元素（没有设置宽度）？

于 2013-04-26T19:30:22.853 回答
0

我会建议最简单的方法来给你的按钮padding-top（当然减少它的高度）。

它不是真正的“自动居中”，因为如果您在不更新填充的情况下更改高度，它不会居中，但是 - 它可以工作，而且干净、容易，而且更新简单。

于 2013-04-26T19:28:50.623 回答