Как мне установить изображение позади текста, используя CSS?

Question

Я пытаюсь автоматически центрировать текст сверху вниз и слева направо, другими словами, текст должен находиться в центре изображения. Единственное, что я могу изменить, это 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>

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

Answer 3

Для горизонтального и вертикального центрирования текста я бы установил text-align: center для горизонтального выравнивания.Затем я бы установил line-height в пикселях, пока он не выровняет центр по вертикали.Обычно это двойной размер шрифта, но это будет зависеть от вашего отступа и установленной высоты.

Answer 4

Если вы знаете, что размеры изображения составляют ширину ширины изображения, выровняйте текст по центру, сделайте высоту половины изображения и установите верхний отступ также на половину.Должен сделать трюк

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