Centreing the contents of a DIV Tag

It always helps to show some code, otherwise it's hard to decide what to add where.

A wrapper typically is a construct like this:


It doesn't center each inner element, it's there to center the whole website and give it a certain width.

The general way to center the innermost elements with CSS is using a centered class like this:

To center the content of the div you can set the div class to centered:
But I'm sure you'd not want your whole web content display centered, so you'd apply that on inner divs or even only on single tags like h1,p, etc., if you don't want all text and images to center. If every h1 caption should center you better add that to the h1 element css to save setting each h1 class="centered".

Bye, Olaf.

Hi thank you very much please find the CSS Code below:

@charset "utf-8";
/* CSS Document */

*{
margin: 0px;
padding: 0px;
}

#wrapper {
width:1024px;
height: 768px;
background-color:#00CCFF;
}

#logo {
width:1024px;
height: 110px;
background-color:#FF6633;
background-image:url(website_images/Raw%20Images/Logo.fw.png);
background-repeat:no-repeat;
background-position:center;
}

#navmenu {
width: 1024;
height: 55px;
background-color:#33CC66;
}


ul#navmenu, ul.sub1, ul.sub2 {
list-style: none;
background-position:center;
margin-left:auto
}

ul#navmenu li {
margin-top: auto;
margin-left:auto;
padding-top: 12px;
margin-bottom:auto;
width:125px;
text-align:center;
position:relative;
float:left;
margin-right: 16px;
}

ul#navmenu a {
display:block;
width:125px;
height:25px;
line-height:25px;
background-color: #fff;
border:1px solid #ccc;
border-radius: 5px;
margin-left:auto;
}

ul#navmenu .sub1 li {
}

ul#navmenu .sub1 a {
margin-top: 3px;
}

ul#navmenu .sub2 a {
margin-top: 3px;
margin-left: 8px;
}

ul#navmenu li:hover > a {
background-color: #CFC;
}

ul#navmenu li:hover > a:hover {
background-color: #FF0;
}


ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}

ul#navmenu ul.sub2 {
display:none;
position:absolute;
top: 0px;
left: 130px;
}

ul#navmenu li:hover .sub1 {
display:block;
}

ul#navmenu .sub1 li:hover .sub2 {
display:block;


#contentArea {
height:500px;
background-color: #cc66cc;
}

#footer {
height: 75px;
background-color:#336633;
}

Without any auto margin and text-algin you don't get things centered. So simply apply what I gave you earlier.

Bye, Olaf.

What are the contents of that div?

Depending on the type of element is how you center. Block level elements are centered by margins on themselves, while inline elements are centered by the text-align property of their parents.
What exactly do you want centered?

Posting the html portion you wish centered would help.

also please post code between [ignore] [/ignore] tags to aid readability.









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech