css - 如何使用 css 在文本后面设置图像?

标签 css image text background

我正在尝试使文本从上到下和从左到右自动居中,换句话说,文本需要位于图像的中心。我唯一可以更改的是 css,code 标签是硬编码的,因此无法更改。

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>

<code>message goes here</code>

最佳答案

您需要将显示设置为阻止 <code> ,这是一个内联元素,所以宽度和高度适用,最好是自动居中的方式而不是硬编码任何填充大小:

sample 在 http://jsfiddle.net/bx852/7/

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}

.notice { font-size: 50px }
</style>

<code>message goes here</code>
<code class='notice'>hi joe</code>

结果:

enter image description here

关于css - 如何使用 css 在文本后面设置图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5447663/

相关文章:

c# - 使用 opentok 获取视频的快照图像

c - 使用 Scanf() 读取特定字符串

java - 使用 IntelliJ IDEA 在 Java 中引用具有相对路径的文本文件

c++ - 如何在QT中的QToolButton下方设置文本而不是在图标下方

html - 如何使用css根据内容量调整相邻 float 的两个对象的高度

javascript - 如何混合网页之间的过渡,给人一种访问者从未离开过页面的错觉?

javascript - 以与上传图像相同的方式保存静态图像

html - Flexbox 单元格上的圆形背景颜色

css - 使用 CSS 去除列表下划线

jquery - 使用 jQuery 动态调整容器内图像的大小