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
RE: Centreing the contents of a DIV Tag
A wrapper typically is a construct like this:
CODE --> HTML
CODE --> CSS
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
To center the content of the div you can set the div class to centered:
CODE --> HTML
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