如何将文字居中置于图像上？

Question

我想将一些文本放在按钮图像上。我设法在按钮上将它的中心从左到右对齐，但垂直对齐对其余部分不起作用。在CSS中有一种方法可以垂直居中文本。

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

Answer 1

如果它是单行文本，您可以设置行高。

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

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

Answer 2

可以使用的margin-top：5px的;或padding-top：5px; （取决于你的div如何设置）在你有你的文本推下来的div。

干杯

Answer 3

只要把代码

line-height:28px; 

在你的类。