15 replies [Last post]
maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Can someone tell me the simplest way to center a div using CSS, which is going to work on all browsers?

Also, can someone tell me the simplest way to center an unordered list using CSS, which is going to work on all browsers?

Sorry to ask a such a simple question, but so many people tell so many different ways to do this, and they all seem more complicated than they need to be.

Thanks, any help is much appreciated

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

As both divs and uls are

As both divs and uls are block level elements, to center them they need:

1. A fixed width
2. The left and right margins set to auto
3. A container to sit in to be centered relative to (the div can be centered against the body, but the body must have width (other than 100%, which is the default anyway)

Note, older versions of IE (5) may require text-align: center instead.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Note with a UL, default

Note with a UL, default browser styling includes a small amount of left hand space, normally ~2em. Some browsers create that space by using a default setting for margin-left (e.g. IE) others padding-left (e.g. Firefox). To properly centre a UL you may need to zero these values.

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

ClevaTreva wrote:As both

ClevaTreva wrote:
As both divs and uls are block level elements, to center them they need:

1. A fixed width
2. The left and right margins set to auto
3. A container to sit in to be centered relative to (the div can be centered against the body, but the body must have width (other than 100%, which is the default anyway)

Note, older versions of IE (5) may require text-align: center instead.

Which steps should I replace with text-align: center ? All of them or just one of them?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi We have until now been

Hi

We have until now been dealing with theory.

How about you post the code you have so we can see what the issue is?

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

ClevaTreva wrote: As both

ClevaTreva wrote:

As both divs and uls are block level elements, to center them they need:

1. A fixed width

No %, right? It must be specified in some absolute units (like px), right?

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

OK, here's my div box <div

OK, here's my div box


and here's my stylesheet

div.menu { font-family: Arial, Verdana, Helvetica, sans-serif; position: absolute; z-index: 3; top: 59px; text-align: center; }

how can I make this div box centered for all screen resolutions?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Without full page code, I

Without full page code, I can only make a stab at it.

Remove the position:absolute

Add a width

Add margin:0 auto

text-align:center may not be necessary.

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

ok, here's the style

ok, here's the style sheet

body { margin: 0; padding: 0; }

div.menu
{
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0 auto;
z-index: 3;
top: 59px;
text-align: center;
width: 50%;
}

And here's the webpage

Chicagoland Audio Consultants

How do I center this div box?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I just looked at it in FF

I just looked at it in FF and IE and it is centered. I added a background:red just so I could see it.

Isn't it working for you?

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

for me the text is centered

for me the text is centered within the div, but the div isn't centered on the page. you see the div centered on the page?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes. So what browser are

Yes.

So what browser are you looking at it in?

The version of IE I was using was 7.

I added text-align:center to the body as well:

Chicagoland Audio Consultants

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
text-align:center;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

div.menu
{
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0 auto;
z-index: 3;
margin-top: 59px;
text-align: center;
width: 50%;
border:1px solid blue;
}
#wrapper{
text-align:center;
}

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

aha, adding text-align:

aha, adding text-align: center to the body fixed it.

thanks a lot for all the help, i really appreciate it!

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

crap hey, how can i position

hey, how can i position this div box 59 px from the top now?

i usually use

position: absolute;
top: 59px;

but i have to turn off absolute positioning to make the centering method you showed me work.

is the best way to position this box 59px from the top to set its top margin to 59px?

This all seems like such a roundabout way of doing things...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

In the code I gave you back,

In the code I gave you back, IT IS 59px FROM THE TOP.

It uses margin-top to do this.

maxplanck735
Offline
Enthusiast
Last seen: 11 years 35 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

lol sorry, thanks a lot for

lol sorry, thanks a lot for all the help!