5 replies [Last post]
JamesHatter
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2008-04-10
Posts: 13
Points: 0

Hi guys,

I'm making a website and I'm using CSS for the layout etc. I've used this code to centre an image horizontally to the middle of the page...

#header img{
display: block;
text-align:center; /* aligns the header image to the center of the page (the SSM logo) */
}

It works fine in Internet Explorer, but when I view my site in Mozilla Firefox, the image is aligned to the left instead of the centre! Please could you help me, what code should I be using?

Many thanks, I am so grateful if anyone can help me Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 23 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Centering the wrong thing

I don't know if this is how it works, but when I had a problem like that it turned out to be because the thing I was using 'text-align: center;' on didn't really know what I was on about.

See, I think when you set text-align, you're saying "Anything within this should be aligned" but of course, there is nothing within the image. Instead I'm thinking you'll be wanting to use margins to center the image.

I'll have to check that though...

Have YOU said Hello yet?
The CSSCreator Hello Thread

PeterPan
PeterPan's picture
Offline
Enthusiast
London
Last seen: 12 years 22 weeks ago
London
Joined: 2008-03-13
Posts: 51
Points: 11

Here goes nothing...

mmm...interesting...well, I'm not 100% sure if I'm catching what you trying to do, but I'm gonna give it a shot anyway, ok?

what you could do, is apply a class to the image or the div that contains the image, lets call that, '.imagePosition'. and lets say that the image has a width of 100px.

So basically, wat you'd do is position the class at 50% from the left, and then set the left-margin to '-100' (half of the images width), this will bring the image into the center of the page!!

so something more like this:

.imagePosition
{
position:relative;
left:50%;
margin-left:-100px;
}

I hope thats what you trying to do...i know that this way of doing things works pretty much on all major browsers.

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 1 year 23 weeks ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Thinking

Or if you went with PeterPans suggestion of creating a div to hold the image in, you could then just do this...

.imagePosition
{ 
text-align: center;
}

But you probably don't want a seperate div JUST to contain an image do you?

Have YOU said Hello yet?
The CSSCreator Hello Thread

Triumph (not verified)
Anonymous's picture
Guru

JamesHatter wrote:#header

JamesHatter wrote:
#header img{
display: block;
text-align:center; /* aligns the header image to the center of the page (the SSM logo) */
}

Try #header {text-align: center;} and remove display: block from the img declaration. text-align: center only works on inline level elements which img normally is but you've got it declared as display: block for some reason (may i as what that reason is?).

If you must leave it as display: block for some reason then you will need to do something like this:
#header img{
display: block;
width: 200px; /* or whatever the width of the image is */
margin: 0 auto;
}

JamesHatter
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2008-04-10
Posts: 13
Points: 0

sorted it! thanks so much

sorted it! thanks so much guys....i just did what triumph said and removed the display: block; line and hey presto it works!