Centering with CSS - css

Question

I want to set my drop down menu in the middle of my page. I could make it both left aligned or centered, but now it is not working anymore.
#navigation {
margin-top: -50;
background: #000;
height: 3em;
list-style: none;
position: center;
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1;
}
#navigation > li {
position: relative;
left:15%;
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%;
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This code used to make the menu centered but it's not working anymore.

Answer 1

Since you haven't provided a snippet of the HTML code for your navigation dropdown, I went ahead and did some detective work to figure it out. So given that the HTML structure is something like this:
<ul id="navigation">
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li>
<a>lonely option</a>
</li>
</ul>
I noticed that there were a few problems in your CSS, I've added comments below to discuss these. So this is your current CSS:
#navigation {
margin-top: -50; /* <-- missing measurement unit, px? em? */
background: #000;
height: 3em;
list-style: none;
position: center; /* <-- no such thing as 'center' */
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1; /* <-- not a big deal but you can leave out the plus for positive integers. */
}
#navigation > li {
position: relative;
left:15%; /* <-- this one ... */
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%; /* <-- ... and this were the ones causing you grief */
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This is the current state of the navigation dropdown. Before I could solve your issue, I had to fix the following problems:
Removed the rule position: center; from #navigation {} as it is
not a valid rule and wasn't doing anything
Removed the rule left: 15% from #navigation > li {} and #navigation > li > a. Using these two rules to try and center was not only not truly centering the dropdown but causing it to break as well.
Removed the rule margin-top: -50; as it was not doing anything
Changed display: inline; to display: inline-block; in #navigation > li {}. This way height: 100%; would make the height of the li element the same height as the navigation bar.
Now with all that out of the way - all you need to do is, instead of using position: center you need to use text-align: center in #navigation {}. That will center your navigation.
Finally, here is the updated and working navigation dropdown demo and code.