내 드롭 다운 메뉴를 페이지 중앙에 정렬하는 방법은 무엇입니까?

Question

내 메뉴를보고 싶다면 here을 클릭하십시오. '많은

* { 
margin: 0px; 
} 
#menu-container ul, 
#menu-container li, 
#menu-container span, 
#menu-container a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#menu-container { 
    height: 49px; 
    border-radius: 0px 0px 0 0; 
    -moz-border-radius: 0px 0px 0 0; 
    -webkit-border-radius: 0px 0px 0 0; 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    border-bottom: 2px solid #0fa1e0; 
} 
#menu-container:after, 
#menu-container ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#menu-container a { 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    color: #ffffff; 
    display: inline-block; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    line-height: 49px; 
    padding: 0 20px; 
    text-decoration: none; 
} 
#menu-container ul { 
    list-style: none; 
} 
#menu-container > ul { 
    float: left; 
} 
#menu-container > ul > li { 
    float: left; 
} 
#menu-container > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #0fa1e0; 
    margin-left: -10px; 
} 
#menu-container > ul > li:first-child > a { 
    border-radius: 0px 0 0 0; 
    -moz-border-radius: 0px 0 0 0; 
    -webkit-border-radius: 0px 0 0 0; 
} 
#menu-container > ul > li:last-child > a { 
    border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
    -webkit-border-radius: 0 0px 0 0; 
} 
#menu-container > ul > li.active > a { 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
} 
#menu-container > ul > li:hover > a { 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
} 
#menu-container .has-sub { 
    z-index: 1; 
} 
#menu-container .has-sub:hover > ul { 
    display: block; 
} 
#menu-container .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: 0; 
} 
#menu-container .has-sub ul li { 
    *margin-bottom: -1px; 
} 
#menu-container .has-sub ul li a { 
    background: #0fa1e0; 
    border-bottom: 1px dotted #6fc7ec; 
    filter: none; 
    font-size: 11px; 
    display: block; 
    line-height: 120%; 
    padding: 10px; 
} 
#menu-container .has-sub ul li:hover a { 
    background: #0c7fb0; 
} 
#menu-container .has-sub .has-sub:hover > ul { 
    display: block; 
} 
#menu-container .has-sub .has-sub ul { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 
#menu-container .has-sub .has-sub ul li a { 
    background: #0c7fb0; 
    border-bottom: 1px dotted #6db2d0; 
} 
#menu-container .has-sub .has-sub ul li a:hover { 
    background: #095c80; 
} 
#menu-container { 
-moz-box-shadow: 0 0 10px #888; 
-webkit-box-shadow: 0 0 10px #888; 
box-shadow: 0 0 10px #888; 
} 

그것은, 그러나하다면 나는 당신에게 그것을 제공하지 않습니다 :

난 당신이 내 소스를 할 것입니다 알고 있기 때문에, 여기에 HTML의 :

<div id='menu-container'> 
<ul id='menu' class="menu"> 
    <li class='active'><a href='/'><span>Home</span></a></li> 
    <li class='has-sub'><a href='/games/'><span>Games</span></a> 
     <ul> 
     <li><a href='/games/dota-2/'><span>Dota 2</span></a></li> 
     <li><a href='/games/cs-go/'><span>CS: GO</span></a></li> 
     <li><a href='/games/css/'><span>CS: Source</span></a></li> 
     <li><a href='/games/terraria/'><span>Terraria</span></a></li> 
     <li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub'><a href='/about.html'><span>About Us</span></a> 
     <ul> 
     <li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li> 
     <li><a href='/faq-list.html'><span>Our FAQs/Q&amp;A List</span></a></li> 
     <li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li> 
     <li><a href='/wiki/'><span>Our Wiki</span></a></li> 
     <li><a href='/wiki/'><span>Our Blog</span></a></li> 
       <li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a> 
     <ul> 
     <li class='last'><a href='/forums/'><span>Forums</span></a></li> 
     </ul> 
    </li> 
</ul> 

그리고 여기 내 CSS입니다 메뉴를 내 페이지 중앙에 정렬하는 방법을 알려줍니다 (코드를 작성하지 않았으므로 내 친구였습니다). 그리고 빈 회색 공간없이 메뉴 만 원합니다. 가능한가?

Answer 1

여기에 a fiddle은 메뉴를 화면 중앙에 정렬하는 방법을 보여줍니다. "EDITED"로 검색하여 CSS에서 내 변경 사항을 검색 할 수 있습니다. 그렇게 3 가지 변화를 모두 표시했습니다.

내가 한 일은 다음과 같습니다. 전체 메뉴 플로트를 만드는 규칙 1.Remove

왼쪽 :

당신은 페이지의 중앙에 원하는 그의 부모 요소에

#menu-container > ul { 
    float: left; 
} 

2.Specify을 :

#menu-container {text-align:center;} 

3

#menu-container > ul > li { 
    float: left; 
} 

0 : 변경, 메뉴의 각 요소에 다음과 같은 규칙을 그 때는

#menu-container > ul > li { 
    display: inline-block; 
} 

마지막 질문 (빈 회색 공간이없는 메뉴도 원함)과 관련하여 나는 무슨 뜻인지 이해하지 못합니다. 메뉴 막대에서 회색 색상을 제거 하시겠습니까?