Center aligning linked images with CSS

[Darran]

I would like to center aligned my linked images.

To center align, I would have to use the following properties:

display:block;
margin:0 auto;

That works fine if the image is not linked.

In my case, even if I hover over a white space, my hover properties would come into place due to it being changed to a block element. And this wouldn't work unless I have a fixed image size.

Is there a fix for this? To center align images if I have different sizes to cater to?

[angelwatt]

Not knowing how your code is currently setup I'll offer a couple solutions. First you could place the image inside a paragraph (or a div):

[HTML]<p class="img"><img src="..." alt="..." /></p>
CSS:
p.img {
text-align: center;
}[/HTML]
Second way, if you have a bunch of images, make a list out of them.
[HTML]
<ul class="images">
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
</ul>
CSS:
ul.images {
margin: 0; padding: 0;
list-style: none;
}
ul.images li {
margin: 0; padding: 0;
text-align: center;
}[/HTML]

[Darran]

While both methods look like a possible solution I have not yet tried, it would involve a lot of work on my part. I am looking for a solution which automatically center aligns images without me having to edit every single post.

Here's how my structure looks like:

<div class="post-content">
        <p><img src="" alt="" /></p>
</div>

I do not want my text to center align too. I just want my images to center align, how can I do that without having to add classes to my paragraphs?

[memco]

Well, you could try relative units like percent, and do something like:

.postcontent p img {
     position: absolute;
     left: 50%;
}

Using your same code though, I might recommend adding a selector for the image hovers too:

.postcontent p img, .postcontent p a:hover img {
display:block;
margin:0 auto;
}

Assuming your code us structured <p><a><img> . . . this will give the image hover state the same properties as the centered non-linked image.

[Darran]

The above methods won't work.

1) I am using a fixed width layout, and using absolute will definitely not set things right.

2) Display: block would work perfectly if the image was not linked. In my case, it is. That is why I want the link to change color only when I hover over the image, not when it is over the same block area.

Thanks for your suggestion though.

Is there anyone who could help me solve this problem?