0
我看過很多關於這個主題的問題，但我似乎無法弄清楚我做錯了什麼仍然。我想讓菜單位於「菜單」div的中心位置，以便它始終位於中心位置，而不管屏幕尺寸/瀏覽器。居中CSS菜單裏面div
這裏是我有我的HTML和CSS：
.site-navigation {
display: block;
font-family: 'Georgia';
font-size: 18px;
font-weight: bold;
\t position:relative;
\t margin-left:auto;
\t margin-right: auto;
\t \t
}
.site-navigation ul {
background: #202020;
list-style: none;
margin: auto;
padding-left: 0;
}
.site-navigation li {
color: #d29500;
\t background: #202020;
display: block;
float: left;
margin: 0 2px 0 0;
padding: 12px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.site-navigation li a {
color: #d29500;
text-decoration: none;
display: block;
}
.site-navigation li:hover {
@include transition(background, 0.2s);
background: #000000;
cursor: pointer;
}
.site-navigation ul li ul {
background: #000000;
visibility: hidden;
float: left;
\t min-width: 150px;
position: absolute;
\t transition: visibility 0.65s ease-in;
\t margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background: #000000;
} \t<div id= "menu">
<div class="site-navigation" >
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About Us</a>
<ul class="dropdown">
<li class="menu-item sub-menu"><a href="#">Location</a></li>
\t \t <li class="menu-item sub-menu"><a href="#">Contact</a></li>
</ul>
</li>
\t <li class="menu-item"><a href="#">Schedule</a></li>
\t <li class="menu-item"><a href="#">Roster</a></li>
<li class="menu-item"><a href="#">Alumni Corner</a></li>
<li class="menu-item"><a href="#">Gallery</a></li>
<li class="menu-item"><a href="#">Support</a></li>
</ul>
</div>
</div>任何幫助，將不勝感激！