12 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 40 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

To Center a box horizontally:

<div class="container">
    <div class="centered">this should be centered</div>
</div>

Most browsers including IE7+ support this:
.centered{
  margin-left: auto; 
  margin-right: auto; 
}

Or you can use the shorthand notation:
.centered{
  margin:0 auto;  /* margin top and bottom 0 (or any value), left and right auto */
}

If you need to support IE6 and lower, you will need this instead:

.container{
  text-align: center;
}
.centered{
  width:300px; 
  margin-left:auto; 
  margin-right:auto;
  text-align:left; /* re-align text back to left */
}

Tags:
Hawk
Offline
Regular
Soton, UK
Last seen: 10 years 38 weeks ago
Soton, UK
Joined: 2003-07-29
Posts: 7
Points: 0

FAQ Centering horizontally

I just spent absolutely ages searching the internet for a solution such as this.

Basically, I was missing out the margin-left:auto & margin-right:auto ... the result being it worked in IE but nothing else.

So is IE the browser breeching standards compliance here ? ... or is Mozilla being too 'picky' ?

Phew ... this just saved me reverting to the dreaded <center> tag !

How can I accomplish the same vertically ?
( I have a form where most of the <label>'s are 2 lines of text and I want them vertically centred to the <input> boxes to their right [ I'm using a <table> to layout the form, but I may try and fully replace this with CSS at a later date ] )

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 49 weeks 4 days ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

FAQ Centering horizontally

Hawk wrote:
How can I accomplish the same vertically ?

This has been asked a few times and I am looking forward for some way of doing it.

http//melbourne.ug.php.net

MaxJ
Offline
Regular
Last seen: 10 years 34 weeks ago
Joined: 2003-08-28
Posts: 36
Points: 0

Useful explanation

Try this for an explanation of standard and quirk modes when centering blocks. It explains this aspect very clearly if you read it all through and look at the examples.

http://theodorakis.net/webauthoring.html

Max

nswan
Offline
Regular
Last seen: 10 years 41 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

FAQ Centering horizontally

I love you Tony for this pearl of wisdom! When Google failed I almost gave up on ever getting my box centered, then I remembered CSSCreator.com. Thanks again!

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 10 years 50 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

FAQ Centering horizontally

Centring blocks using absolute positioning and negative margins:

#thisblock {
position: absolute;
left: 50%;
width: 500px;
padding: 10px;
border: 2px solid #000;
margin-left: -262px;
}

...

<div id="thisblock">
   Centre-me-do!
</div>

Requirements:
The width of the box must be set.

How does it work?
It's simple when you think about it - the left: 50% positions the box so that it's left side is in the middle of the page. Using negative margin-left, we then pull the box back across the page by half of it's width, so there is an equal amount of it's width either side of the centre of the page - i.e. the box is centred.

Calculating margin-left:
Don't forget to take into account that box width = border + padding + width (margins can be ignored in this case), so from left to right, #thisblock has:

2px (border) + 10px (padding) + 500px (width) + 10px (padding) + 2px (border) = 524px

So in order to pull #thisblock halfway back across the page, we will need to set margin-left to -(524/2) = - 262ox.

Compatibility:
Mozilla Firebird (tested by insin)
Internet Explorer 6 (tested by insin)
Internet Explorer 5 will most likely need the Box Model Hack to be used to set the box width correctly - see the Box Model Hack version below. (not tested by insin)

A Pedant Writes...
Into the mountain,
I will fall.

enodur
Offline
newbie
Last seen: 10 years 31 weeks ago
Joined: 2003-09-20
Posts: 2
Points: 0

FAQ Centering horizontally

I don't really see why the last reply was posted... expect for being a more complicated way of doing it.

I see that the first code posted by Tony works both in IE and Mozilla. Then why do we have to use negative margins and stuff? I had that before for this div I needed to be centered, but Tony's code is much smaller, less confusing and easily modified to fit many needs. I can even use percentage widths inside other divs... which is not possible with the negative margins method!

Why then? Just because text-align is not meant to be used for centering divs and only text... we shouldn't be using it? Wouldn't this validate?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 15 hours 40 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5055
Points: 2633

FAQ Centering horizontally

Hi enodur,
The negative margin method is an alternative, you are free to choose which method you like.
Both methods should validate.
Using text-align: center to center a box is not what that property was meant for, it is only there to get IE to center corectly.
You may want to use text-align:left in the inner box to realign the text.

The negative margin method is quite simple once you understand it.
Firstly the left 50% puts the left edge of the box in the middle of the screen.
Then you use the negative margin which is half of the width of the box to move the center of the box into the center.

Hope that helps.

enodur
Offline
newbie
Last seen: 10 years 31 weeks ago
Joined: 2003-09-20
Posts: 2
Points: 0

FAQ Centering horizontally

I guess u are right... but I find the first one better in my case when I want my centered content to have variable percentage-based width according to the size of the container object. i.e. a menu column that auto-adjusts its width based on the screen resolution. And I don't mind setting the text-align to left in the child objects.

Anyway, is this just a bug in IE (if it is, Mozilla has it too!)? or is it gonna stay like this in browsers...?

André Huf
Offline
newbie
Last seen: 10 years 28 weeks ago
Joined: 2003-10-11
Posts: 2
Points: 0

FAQ Centering horizontally

Tony wrote:

The negative margin method is an alternative,

no, it is'nt.

with negative margins, as soon as the page becomes smaller than the centered content, the left part of the content sits outside of your screen - unreadable because no scroll bar to scroll up there is supplied by the browser. (at least with ie 6, should be the same in any browser)

JC4Life
Offline
Regular
Last seen: 10 years 31 weeks ago
Timezone: GMT-5
Joined: 2003-09-22
Posts: 17
Points: 0

FAQ Centering horizontally

That centering trick (the first one) is pretty cool! I have one problem/question, though: when using it with lists, how do you make it so that the items share the same left rather than being indented?

Many thanks for your help in advance!

Best Regards,
Joe of Christ For Life Ministries

Jesus Christ 4 life! D

André Huf
Offline
newbie
Last seen: 10 years 28 weeks ago
Joined: 2003-10-11
Posts: 2
Points: 0

FAQ Centering horizontally

JC4Life wrote:
how do you make it so that the items share the same left rather than being indented?

look here for an in depth review of css and lists...

http://www.alistapart.com/stories/taminglists/

BillysProgrammer
BillysProgrammer's picture
Offline
Regular
Canada
Last seen: 4 years 39 weeks ago
Canada
Timezone: GMT-4
Joined: 2009-07-06
Posts: 11
Points: 0

Easier Method

Set a width

Add margin: 0px auto; to the code.

DONE!