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

Question

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

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

Answer 1

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

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>

结果：

Answer 2

如果你知道图像的尺寸使宽度成为图像的宽度，则将文本对齐到中心，使图像的高度为图像的一半，并将顶部填充设置为一半。应该做的伎俩

code {
  background:url("images/bkg.png");
  width: 400px;
  height: 200px;
  text-aling: center;
  padding-top: 200px;
}

Answer 3

要水平和垂直居中文字，我会将text-align: center设置为水平对齐。然后，我会以像素为单位设置line-height，直到它垂直对齐中心。通常，这是字体大小的两倍，但这取决于您的填充和高度设置。

Answer 4

试试这个，

code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}

希望你得到答案..

我也可以试试这个，

<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>