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

Similar Threads
thread Thread Starter Forum Replies Last Post
Microsoft Word bullet points randomly aligning Tinarella Mac Basics and Help 3 May 30, 2013 05:20 AM
OpenGL ES: Aligning Data Blakeasd iPhone/iPad Programming 1 May 18, 2013 10:11 PM
why sometimes 'save linked file' and sometimes 'download linked file'? lloyd709 OS X 10.8 Mountain Lion 1 Jan 18, 2013 03:23 AM
Aligning a table in Pages 09 c073186 Mac Applications and Mac App Store 0 Dec 20, 2012 09:10 AM
This is frustrating me... How do I Center text between two images? thinkpatience Web Design and Development 2 Oct 9, 2012 05:08 PM

Forum Jump

All times are GMT -5. The time now is 01:25 AM.

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

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