homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Centering images in CSS
David_Nixon




msg:4462430
 12:59 pm on Jun 7, 2012 (gmt 0)

Hi all,

I'm new to the forum and since I've had little help from others, I thought I'd give this one a go.

Like many, I'm very new to web design, but I'd like to design my own.

I write articles from photography trips, and like to include images in various clusters. Sometimes I like to add three images side by side, sometimes two and sometimes one etc... with captions....

I have the images in tables, and fo rmost browsers it works okay, but on larger browsers and some old ones like the ones where I work, the images are not in the center.

I want to be bale to centre them, ideally without using tables, and I have spent hours on end trying to work out what's best. Can anybody help me?

I don't want then to start from the left or right, I always want them centred. I did add some code to center the tables, but when they are opened in a large browser, it then puts larger gaps between the images, and I want them to stay close together.

PPPPlease help. I'm still very new, so please if you respnd be very basic and give me step by step. I still don't understand all of the web design 'lingo'.

Thanks in advance.

Dave

[edited by: alt131 at 7:01 pm (utc) on Jun 7, 2012]
[edit reason] Thread Tidy [/edit]

 

DrDoc




msg:4462628
 8:05 pm on Jun 7, 2012 (gmt 0)

Welcome to Webmaster World!

You need to place the images in a container, and instruct it to center its contents.

<div style="text-align: center;">
<img>
<img>
<img>
</div>


If that's not what you're looking for, then we need some more information :)

[edited by: alt131 at 2:24 am (utc) on Jun 8, 2012]
[edit reason] Style codes [/edit]

ansaripk




msg:4463174
 11:06 pm on Jun 8, 2012 (gmt 0)

you can align the image center of container using "text-align:center" rule of css but make sure to clear the previous floating.
try this:

<div style="clear:both; text-align:center">
<img src="image location" alt="text" width="width" height="height" />
</div>

and image will be center aligned.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved