html - 如何将文本居中放置在图像上？

Question

我正在尝试在按钮图像上放置一些文本。我设法使它在按钮上从左到右居中对齐，但垂直对齐并不能解决其余部分的问题。 CSS 中是否有一种方法可以使该文本垂直居中。

.selectedTabOnPlacementMenu
{
    background: url('/Content/Images/Blank_Yellow.png') no-repeat;
    width:88px;
    height:28px;
    text-align:center;
    font-weight:bold;
}

Answer 1

如果是单行文字，可以设置line-height。

<div style="height:50px;background-color:#ccc;">
    <p style="line-height:50px;">test</p>
</div>

将多行文本垂直居中要困难得多。