How to center an image

Pádraig · #1 Jun 12th, 2007, 01:08

How do you center and image?

I have various methods but they don't work or they fail validation.

Here is my HTML

<div id="header">
<img src="example.gif" />
</div>

Thanks,
Pádraig.

karinne · #2 Jun 12th, 2007, 01:24

You'll have to explain a bit more .... center where?!?!

The entire site?

CSS

Code: Select all

body {
   background: #fff url(example.gif) no-repeat 50% 50%;
}

Pádraig · #3 Jun 12th, 2007, 01:36

I want to center the image in the header.

Lchad · #4 Jun 12th, 2007, 02:26

You'll have to apply some css to the image and give it margin: 0 auto;

c010depunkk · #5 Jun 12th, 2007, 06:17

Code: Select all

<div id="header">
<img src="example.gif" id="header_image" />
</div>

in the stylesheet:

Code: Select all

#header { text-align:center; }
#header_image { margin:0px auto; }

Pádraig · #6 Jun 12th, 2007, 07:38

So, would this be wrong?

CSS

Code: Select all

.logo {
    padding: 0 50px 0 50px;
}

MikeHopley · #7 Jun 12th, 2007, 11:05

Quote:

Originally Posted by Pádraig

So, would this be wrong?

CSS

Code: Select all

.logo {
    padding: 0 50px 0 50px;
}

That would only work if your page/container was exactly 100px wider than your image, and your image had no margins.

Go with Karinne's method if the image is decoration not content.

karinne · #8 Jun 12th, 2007, 12:06

Yeah ... to center an image in your header I would do

Code: Select all

#header {
    background: #fff url(image.jpg) no-repeat 50% 50%;
    width: 700px;
    height: 120px;
}

Just change the width and height.

Pádraig · #9 Jun 12th, 2007, 12:27

Yeah, okay!

Thanks,
Pádraig.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
how can i center this?	djcritch	Web Page Design	6	Feb 25th, 2008 07:06
Position image in the dead center of my webpage	Fysicus	Web Page Design	7	Sep 26th, 2007 08:38
Center a Swf Help??	nutbolt	Web Page Design	20	Apr 9th, 2007 10:21
center align text/background image	Lchad	Web Page Design	5	Dec 5th, 2006 10:40
Center image within div	hessodreamy	Web Page Design	6	Nov 28th, 2005 11:58

		Webforumz.com > Main Forums > Design Your Website > Starting Out
How to center an image