Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Andrzejek on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centreing the contents of a DIV Tag

Status
Not open for further replies.

GRIFFIJ

Programmer
Aug 29, 2002
43
GB
I have created CSS drop-down list works fine it has five buttons I have created it inside a DIV which in turn is in a WRAPPER tag

What I am trying to achieve is Centring the contents of that DiV at the moment it appears absolutely to the left.

If anybody can help I would be very grateful

Thank you in advance

Kind regards

Joel
 
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:
HTML:
<html>
    <head>....</head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html>

CSS:
body {
    margin: 0;
    padding: 0
}
.wrapper {
    width: 800px;
    margin: 0 auto;
}

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:
CSS:
.centered {
text-align:center;
margin-left:auto;
margin-right:auto;
}

To center the content of the div you can set the div class to centered:
HTML:
<body>
        <div class="wrapper centered">
<h1>Main Caption</h1>
<h2>Sub Caption Of The Main Caption</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
        </div>
    </body>
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]
Code:
[/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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top