Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Darran

macrumors member
Original poster
Mar 31, 2008
77
0
Singapore
I would like to center aligned my linked images.

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

Code:
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

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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;
}
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;
}
 

Darran

macrumors member
Original poster
Mar 31, 2008
77
0
Singapore
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:

Code:
<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

macrumors 6502
May 1, 2008
259
2
Well, you could try relative units like percent, and do something like:

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

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

Code:
.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

macrumors member
Original poster
Mar 31, 2008
77
0
Singapore
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?
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.