×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Centreing the contents of a DIV Tag

Centreing the contents of a DIV Tag

Centreing the contents of a DIV Tag

(OP)
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

RE: 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:

CODE --> HTML

<html>
    <head>....</head>
    <body>
        <div class="wrapper">
        </div>
    </body>
</html> 

CODE --> 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:

CODE --> 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:

CODE --> 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.

RE: Centreing the contents of a DIV Tag

(OP)
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;
}

RE: Centreing the contents of a DIV Tag

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

Bye, Olaf.

RE: Centreing the contents of a DIV Tag

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 [code][/code] 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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close