html - 将文本设置为图片，这两个图片都链接到图片中间的同一页面

Question

在我网站的移动主题中，应该有一张带有文字的图片，它们都链接到父菜单。但是，我无法调整文字高度（它应该在图片高度的中心但文字出现在图片的底部，请看图片：

（左电流，正确的应该是）

我当前的文件：

在 html 中：

<div id="topbar">
//<div id="title">Über</div>
//<div id="bluerightbutton"><a href="/m/language.html">More</a></div>
<div id="leftnav"><a href="/m/de/futuristic-os">futuristicOS</a></div>
</div>

和CSS：

#leftnav a:before{content:url("../images/leftback.png");}
#leftnav a:first-child{z-index:2; padding-bottom: 50%; width:auto}
#leftnav a{z-index:3;margin-left:-4px;border-width:0 5px 0 13px;padding-right:4px;float:left}

Answer 1

在 CSS 中，我会将line-height您的文本设置为图像的高度值。这应该在图像上垂直居中。

见小提琴：http: //jsfiddle.net/GYatesIII/CLd4t/1/

Answer 2

尝试：

#leftnav a {
    display: table-cell;  // Allows vertical-align & height
    vertical-align: middle;
    /* Now you can adjust height too, so do that until you're satisfied */
}