Question

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

这是我到目前为止所得到的：

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

Answer 1

解决此问题的最简单方法是为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;
 }

Answer 2

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

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

How can I resize a background-image to fit my element (without set width) in CSS 2?

Answer 3

我建议给出按钮padding-top的最简单路线（并按照当然的数量减少它的高度）。

它不是真正的“以自动为中心”，因为如果你在不更新填充的情况下改变高度它就不会居中，但是 - 它有效且干净简单，更新简单。

CSS垂直对齐图像内的文本按钮

3 个答案: