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

标签 html css

<分区>

我在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-->

我想在图像的正中间添加文本,即“ block 文本”,但文本始终显示在图像的顶部。有什么办法可以在图片中间显示文字吗?

谢谢!

最佳答案

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

line-height: 100px;

请参阅有关此工作 fiddle 的示例 http://jsfiddle.net/aGhwA/

关于html - 文本不在 div 内背景图像的中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19351009/

相关文章:

javascript - 如何将 html 按钮链接到 asp.net 中的代码隐藏方法?

javascript - 拖放到 HTML5 Canvas

javascript - 在视口(viewport)元标记中设置最小宽度

html - flexbox 元素向右浮动不起作用

javascript - 如果将 div 推到容器外,您如何做到这一点?

html - WHATWG html5标准文档中idl属性是什么意思?

html - outlook 在电子邮件签名中显示 css 代码

不使用 class 或 id 的 Javascript 切换

javascript - Jquery 图像悬停卡住了

javascript - 根据 URL 部分更改背景图片