Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 31, 2008, 08:48 PM   #1
Darran
macrumors member
 
Join Date: Mar 2008
Location: Singapore
Send a message via MSN to Darran
Center aligning linked images with CSS

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?
__________________
30GB iPod Video
Intel iMac 20" 2.4GHz 4GB
Blog: LimeTouch
Darran is offline   0 Reply With Quote
Old Aug 31, 2008, 10:00 PM   #2
angelwatt
Moderator emeritus
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: 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;
}[/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]
angelwatt is offline   0 Reply With Quote
Old Sep 1, 2008, 02:34 AM   #3
Darran
Thread Starter
macrumors member
 
Join Date: Mar 2008
Location: Singapore
Send a message via MSN to 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:

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?
__________________
30GB iPod Video
Intel iMac 20" 2.4GHz 4GB
Blog: LimeTouch
Darran is offline   0 Reply With Quote
Old Sep 2, 2008, 04:07 PM   #4
memco
macrumors regular
 
Join Date: May 2008
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.
memco is offline   0 Reply With Quote
Old Sep 3, 2008, 08:36 PM   #5
Darran
Thread Starter
macrumors member
 
Join Date: Mar 2008
Location: Singapore
Send a message via MSN to 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?
__________________
30GB iPod Video
Intel iMac 20" 2.4GHz 4GB
Blog: LimeTouch
Darran is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
thread Thread Starter Forum Replies Last Post
center an iframe with css? Starhorsepax Web Design and Development 11 Feb 25, 2014 04:09 PM
Help with CSS alignment in IE7 jamarwright Web Design and Development 2 Sep 11, 2009 08:58 AM
Flash or CSS - Scrolling image with rollover help LimeiBook86 Web Design and Development 6 Sep 15, 2008 09:45 AM
Leader characters on center aligned text nicrose Design and Graphics 1 Oct 18, 2007 07:22 PM
Need help with css background image Sammie Web Design and Development (archive) 2 Feb 20, 2005 02:03 AM


All times are GMT -5. The time now is 05:03 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC