Center Linked Image

[almo136]

Hi,

I'm trying to add a link to an image and then center it within a div.

I'm using this:

<a href="#"><img class="rss" src="#" alt="RSS" title="RSS" height="19" width="19" /></a>

.rss {
margin: 0 auto;
display: block;
}

This centers the image but the entire line then turns into a link instead of just the image (in FF).

What's the best way to achieve this?

[simonuk]

As you've found out the img tag doesn't have many rules it follows so it is harder to control than others.

The quick fix is to wrap the img inside something else like a P or span. This gives you back the control you're looking for.

[almo136]

I had thought about wrapping it in <p> tags but figured this might be considered bad practice?

Using a span doesn't seem to allow the text-align: center either. I guess because it's and inline element.

<p> it is then!

Thanks.

[rocknbil]

... but figured this might be considered bad practice?

No, the opposite - a raw element is bad practice, applying a semantic element is good practice. :-)

What you need to decide is whether the <p> semantically describes your content. (Tend to think it does . . . )

[almo136]

ahh, ok. Sounds good,

Thanks.