Sprite image alignment issue?

Question

I have displayed one of sprite's image in span tag. The span is in inside of the some other element like <div>, <li>, <p>. The parent elements of the span's, text alignment is center.

The text content of the parents elements are aligned center correctly. But i am not able to make the span with sprite image to center.

Here i have added the sample code.

HTML Markup:

<div align="center"><span class="cameraIcon spriteImage"></span>Some Text Content</div>

Style

span.cameraIcon {
background-position: -240px 0;
width: 24px;
height: 24px;
position: absolute
}

Any suggestions would be appreciative.

Thanks!

Answer 1

It seems that the span serves no other purpose than to show a background image, so I would get rid of it completely and add the background to its parent element:

html:

<div class="cameraIcon spriteImage">Some Text Content</div>

css:

.cameraIcon {
    background-position: -240px center;
}

Answer 2

By using absolute positioning, the span tag is no longer part of the text flow inside the div element, so it's not affected by text alignment.

You could use the style display: inline-block; to make the span element a block element that is still part of the text flow. (Some older browsers doesn't support that display value, though.)