html - 文本不在 div 内的背景图像中间

Question

我在 DIV 中有一个背景图像

CSS代码是：

#block_header{
    float:left;
    background-image:url("Block_image_orange.png");
    background-size: 300px 100px;
    width:300px;
    height:100px;
    text-align:center;
    font-size:18px;
    color:#FFF;
}

图像 div 的 HTML 代码是：

 <div id="block_header">
                 Block Text
    </div><!--block_header id ends here-->

我想在图像的中间添加一个文本，即“块文本”，但文本始终显示在图像的顶部。有没有办法在图像中间显示文本？

谢谢！

Answer 1

尝试将此添加到您的#block_header：

line-height: 100px;

请参阅此工作小提琴的示例http://jsfiddle.net/aGhwA/