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!

Register Log in
  • Congratulations strongm 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

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
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
Without any auto margin and text-algin you don't get things centered. So simply apply what I gave you earlier.

Bye, Olaf.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
107
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
122
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
617
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top