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
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
Talk To Other Members
RE: Centreing the contents of a DIV Tag
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>Bye, Olaf.
RE: Centreing the contents of a DIV Tag
@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
Bye, Olaf.
RE: Centreing the contents of a DIV Tag
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