18 replies [Last post]
batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

I am trying to make a website for a class of mine. I need to center a div tag in a style sheet. I cannot have any positioning or anything on the HTML page itself. Just calling the class.

Anyway, each time I use the {align: center} tag to center my div, the only thing that gets centered is the text. How do I center the entire div tag, not just the text?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 11 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Center div

Hi Batpixie,
Try using margin-left:auto; margin-right:auto; make sure you also set the width of the div.

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Re: Center div

It didn't work, but thanks anyway.

Tony wrote:
Hi Batpixie,
Try using margin-left:auto; margin-right:auto; make sure you also set the width of the div.

Daniel
Daniel's picture
Offline
Enthusiast
Last seen: 23 weeks 1 day ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 76
Points: 0

Centering a DIV tag

Could you post a link to the page in question?

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Centering a DIV tag

I haven't uploaded it yet, but I can post my style sheet & the HTML of it.

Style Sheet -

/* background */
body {background-color: F1FFF1;
font-family: verdana;
font-size: 12px;
color: #000000;
background-image: url(11green.gif)}

/* title */
.title {background-image:url(top3.gif);
background-repeat:no-repeat;
margin-right: auto;
margin-left: auto;
width: 698px;
height: 140px}

/* main */
.main {margin-right:auto;
margin-left:auto;
width: 500px;
border: solid 3px #63C684;
background-color: #F1FFF1;
padding: 2;}

/* navigation */
.nav {border: solid 3px #63C684;
margin-right:auto;
margin-left:auto;
width:180;
background-color:F1FFF1;
padding:2;}

/* inline divs */
.main, .nav {display: inline;
margin: 4}

~~~~~
HTML page

<html>
<head>
<title>Southern Crescent Habitat for Humanity</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<div class="title"></div>

<div class="main">blah</div>

<div class="nav">blah</div>

</html>

Daniel wrote:
Could you post a link to the page in question?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 11 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Centering a DIV tag

Hi Batpixie,
Why are you displaying the divs inline?
I'm not sure exactly what you are trying to do but here's a suggestion.

<div class="title"></div>
<div class="con">
   <div class="main">blah</div>
   <div class="nav">blah</div> 
</div>

.con{width: 685px; 
margin-left:auto; 
margin-right:auto; 
clear:both;}

 .main {
float:left;
width: 500px;
border: solid 3px #63C684;
background-color: #F1FFF1;
padding: 2px;}

/* navigation */
.nav {
float:left;
border: solid 3px #63C684;
width:180px;
background-color:F1FFF1;
padding:2px;} 
Make sure you leave out the display inline.

That should give you nav and main together in the center of the page.

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 32 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

Centering a DIV tag

Tony's suggestion won't work in IE (which is probably why you didn't think it worked). In IE you must add text-align : center; to the containing div, ie:

<div name=container style="text-align : center;">
  ...
  <div name=toBeCentered style="margin-left : auto; margin-right : auto;">
    some content here I suppose
  </div>
  ...
</div>

should get the toBeCentered central in all browsers - some need the auto margins, others need the parent center align. No matter what works and what doesn't in IE, make sure you include both!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 11 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Centering a DIV tag

If you use a valid doctype such as

Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
margin left and right auto work in IE 6 on windows.
I'm not sure about Mac or earlier versions of ie on windows but it would be good to here which browsers it works for.

I have attached a simple test page If it works (the div is centered) in your browser let us know.

So far it works for me in Netscape 7, IE6, Opera7 all on windows.

Matt_Lenz
Offline
newbie
Queensland, Australia
Last seen: 11 years 17 weeks ago
Queensland, Australia
Joined: 2003-07-01
Posts: 1
Points: 0

Centering a DIV tag

Quote:

--------------------------------------------------------------------------------

If you use a valid doctype such as Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> margin left and right auto work in IE 6 on windows.
I'm not sure about Mac or earlier versions of ie on windows but it would be good to here which browsers it works for.

I have attached a simple test page If it works (the div is centered) in your browser let us know.

So far it works for me in Netscape 7, IE6, Opera7 all on windows.

marginauto.html
Filesize: 409 Bytes

IE 5 does not show the text as centered! :?

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 32 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

Centering a DIV tag

That's 'cause IE5 sucks. It doesn't even recognise the DOCTYPE. That's the situation where you need the containing DIV to have text-align : center; in it. (sorry, I've been saying align for ages, didn't think that was right)

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 11 years 32 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Centering a DIV tag

Tony:

Do you think we could have an area that had posts solving common problems people encounter in CSS? ex. centering stuff, box-model hacks, etc.?

I checked the knowledge base, and I dunno if this would fall under that, but I think it would be helpful for people if they could check that first prior to thinking that their CSS task is impossible Wink

-Mike

</twocents>

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Centering a DIV tag

When I didn't have them inline they automatically went to different lines.

And, that still did not work.

Thanks though. I have no idea what is wrong. I copied & pasted everything you put.

Tony wrote:
Hi Batpixie,
Why are you displaying the divs inline?
I'm not sure exactly what you are trying to do but here's a suggestion.
<div class="title"></div>
<div class="con">
   <div class="main">blah</div>
   <div class="nav">blah</div> 
</div>

.con{width: 685px; 
margin-left:auto; 
margin-right:auto; 
clear:both;}

 .main {
float:left;
width: 500px;
border: solid 3px #63C684;
background-color: #F1FFF1;
padding: 2px;}

/* navigation */
.nav {
float:left;
border: solid 3px #63C684;
width:180px;
background-color:F1FFF1;
padding:2px;} 
Make sure you leave out the display inline.

That should give you nav and main together in the center of the page.

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Centering a DIV tag

I tried something I find odd, but it worked. I made a big DIV around the DIVs I wanted centered & then I said {text-align: center} in the big DIV & that centered the DIVs I wanted centered.

Thanks to everyone that helped. For some reason none of your suggestions worked, I will try to figure out why. I am using IE 6, so they should have.

But I got it done, so that is all that matters.

Thanks.
Amber

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 11 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Centering a DIV tag

DJSdotcom,
Thats a good idea, I'll get it set up shortly.
The knowledge base is a bit limited at the moment so I might set up another forum for common problems.

Batpixie,
Sorry for highjacking you post.
Could you attach what you have got so far or at least a sample page to make it easier for us.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 11 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5125
Points: 2722

Centering a DIV tag

OOps you're to quick for me.
Glad you found a solution.

batpixie
Offline
newbie
Stockbridge, GA
Last seen: 11 years 18 weeks ago
Stockbridge, GA
Joined: 2003-06-30
Posts: 9
Points: 0

Centering a DIV tag

Thank you. And you can hijack my post all you like. You guys have a good site going on here & if you want to make it better feel free to discuss it here.

Tony wrote:
OOps you're to quick for me.
Glad you found a solution.

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 32 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

Centering a DIV tag

I was close... just said align instead of text-align... :oops:

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

JonnySnakes
Offline
newbie
Last seen: 7 years 46 weeks ago
Joined: 2006-12-15
Posts: 1
Points: 0

Tried it out, but...

I tried putting margin right and left auto, and text-align center, but it only fixed my problem in IE and not Firefox. What do I need for it to work in Firefox?

-Jon

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

JonnySnakes this is a very

JonnySnakes this is a very old thread! it is better not to post to old threads or indeed to tag onto existing threads please re-post your question as a 'New Topic' in the appropriate area but also this time please include a link to page or the full html/css.
Thanks,

Hugo.

P.S. Have you included a DTD as mentioned everywhere Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me