Centering an Image Using CSS

aaronfalloon · 02-23-2006, 09:56 AM

How do you center an image using CSS? Thanks in advance.

painperdu · 02-23-2006, 10:13 AM

The image needs to be in a container and then use 'text-align'.

stscac · 02-23-2006, 10:28 AM

The whole thing would look like this:

Code:

text-align:center;

-Steve

aaronfalloon · 02-23-2006, 10:37 AM

I read somewhere were that wasn't the recomended way, is there any other methods?

Jim_ · 02-23-2006, 01:29 PM

Code:

margin-left: auto;
margin-right auto;

You might need to set width, but that should work.

stscac · 02-23-2006, 01:35 PM

What other method with CSS is there?

You can either use css in the header of your file, an external style sheet, or, within an image tag directly in its CSS "style" attribute. I use the first two regularly, but the third is not my favorite.

-Steve

Tree · 02-23-2006, 02:04 PM

Here's a one I found using The Anointed One. I haven't tested it myself, so it may or may not work.

Code:

<div style="text-align: center;">
  <div style="text-align: left; margin: 1em auto; width: 50%;">
  </div>
</div>

aaronfalloon · 02-23-2006, 02:26 PM

Thanks for the help guys, only the first method seems to be working. Thanks again.

jmweb · 02-26-2006, 02:24 AM

you could also use

Code:

<img src="file.jpg" align="center">

aaronfalloon · 02-26-2006, 06:22 AM

I don't think thats using CSS but thanks anyway.

02-23-2006, 09:56 AM	THREAD STARTER #1 (permalink)
aaronfalloon NamePros Regular Join Date: May 2005 Location: Northern Ireland Posts: 755	Centering an Image Using CSS How do you center an image using CSS? Thanks in advance. __________________ A young web developerâ€™s journey to financial freedom - aaronfalloon.com Last edited by ComDriver; 02-23-2006 at 10:05 AM.

02-23-2006, 10:13 AM	#2 (permalink)
painperdu NamePros Regular Join Date: Jun 2003 Location: Louisiana, USA Posts: 661	The image needs to be in a container and then use 'text-align'. __________________ dotbob.com -Cheap Domain Name Registrations/Unlimited Web Hosting Plan $5.98/month

02-23-2006, 10:28 AM	#3 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,803	The whole thing would look like this: Code: text-align:center; -Steve

02-23-2006, 10:37 AM	THREAD STARTER #4 (permalink)
aaronfalloon NamePros Regular Join Date: May 2005 Location: Northern Ireland Posts: 755	I read somewhere were that wasn't the recomended way, is there any other methods? __________________ A young web developerâ€™s journey to financial freedom - aaronfalloon.com

02-23-2006, 01:29 PM	#5 (permalink)
Jim_ NamePros Regular Join Date: Aug 2005 Location: NY, USA Posts: 608	Code: margin-left: auto; margin-right auto; You might need to set width, but that should work. __________________ ask me about the internet

02-23-2006, 01:35 PM	#6 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,803	What other method with CSS is there? You can either use css in the header of your file, an external style sheet, or, within an image tag directly in its CSS "style" attribute. I use the first two regularly, but the third is not my favorite. -Steve

02-23-2006, 02:04 PM	#7 (permalink)
Tree NamePros Regular Join Date: Feb 2006 Location: Atlanta, GA, USA Posts: 335	Here's a one I found using The Anointed One. I haven't tested it myself, so it may or may not work. Code: <div style="text-align: center;"> <div style="text-align: left; margin: 1em auto; width: 50%;"> </div> </div>

02-23-2006, 02:26 PM	THREAD STARTER #8 (permalink)
aaronfalloon NamePros Regular Join Date: May 2005 Location: Northern Ireland Posts: 755	Thanks for the help guys, only the first method seems to be working. Thanks again. __________________ A young web developerâ€™s journey to financial freedom - aaronfalloon.com

02-26-2006, 02:24 AM	#9 (permalink)
jmweb Account Suspended Join Date: Jan 2004 Location: Charlottetown Posts: 1,033	you could also use Code: <img src="file.jpg" align="center">

02-26-2006, 06:22 AM	THREAD STARTER #10 (permalink)
aaronfalloon NamePros Regular Join Date: May 2005 Location: Northern Ireland Posts: 755	I don't think thats using CSS but thanks anyway. __________________ A young web developerâ€™s journey to financial freedom - aaronfalloon.com

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Greatest Image Gallery Tutorial Ever	Wybe	Webmaster Tutorials	5	12-20-2005 10:51 AM
Split this image into 100% CSS and get 200 NP$ - Even 1 free .com domain name.	mholt	Web Development Wanted	5	09-15-2005 05:25 PM
What Keywords?	spy69	Search Engines	5	06-28-2005 08:05 PM
CSS and Two Image Rollover Effects	wasabisam	Programming	2	03-03-2004 06:12 AM