2

I want to add some text over an image in the middle. I use this code:

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; vertical-align:middle;">text</div>

I want the text to be in the middle of the heart. But it just appears in the top centered. The vertical alignment doesn't seem to be working. What am I doing wrong? Any help appreciated!

niaoy
  • 91
  • 2
  • 9

3 Answers3

1

You can either use absolute positioning, or line height to achieve the result you want, here's how: jsfiddle.net/YZXVe/

Ryan Potter
  • 835
  • 1
  • 11
  • 25
1

Set the line-height to equal the height of your div:

<div style="background-image: url(../images/game-hearts-icon.png); height: 64px; width: 64px; text-align: center; line-height: 64px;">text</div>

Better yet, don't use inline styles:

HTML

<div class="game-hearts-icon">text</div>

CSS

.game-hearts-icon {
    background: transparent url(../images/game-hearts-icon.png) scroll 0 0 no-repeat;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
}
Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
1

You can use <center> inside the div. It will put your text in the center, vertically and horizontally.

   <div>
    <center>
      <p>Your Text</p>
    </center>
   </div>

Hope it helps.

Saswata Sundar
  • 586
  • 1
  • 4
  • 15