Question

How do you align a background icon image if the text is center-aligned? Like a small icon before the text. If it’s not center-aligned, I can use something like:

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
}

But if I center align it like so:

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
  text-align: center;
}

The background remains on the left corner while the text is centered (so there’s a huge gap in between them). It’s possible to use background position, however, if the screen is of a different size than what I use, the background will be overlapped by the text.

You can check the jsFiddle demo:

http://jsfiddle.net/PvL3T/2/

Answer 1

:first-letter pseudo element will play around good, http://jsfiddle.net/PvL3T/7/

p { 
  padding-left: 40px;
  text-align: center;
}

.resize:first-letter { 
   background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px;
}

this will work even into IE6 if you care, but only if there is white space between selector and opening curve bracket. Only for IE6 something like this p:first-letter{... will not work, but p:first-letter {... will

and just in similar way, you may use :first-line