내 메뉴의 항목을 가운데 정렬하는 방법은 무엇입니까?

Question

내 메뉴에서 항목을 가운데 정렬하는 방법은 무엇입니까? (li s) 내 웹 페이지 내에서 메뉴 (ul)를 센터링 할 수 있었지만 메뉴 (집, 정보 등)의 실제 항목을 가운데에 맞출 수는 없었습니다.

내 HTML/여기에 CSS :

#nav { 
 
\t font-family: Century Gothic, Arial, Helvetica, sans-serif; 
 
\t font-size: 15px; 
 
\t color: #fff; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
\t background-color: #eee; 
 
\t padding: 5px; 
 
\t height: 38px; 
 
\t width: 913px; 
 
\t font-weight: bold; 
 
\t border-style:solid; 
 
\t border-width:4px; 
 
\t border-color: #000; 
 
} 
 
#nav ul { 
 
\t padding: 0px; 
 
\t margin-top: 0px; 
 
\t margin-right: 0px; 
 
\t margin-bottom: 0px; 
 
\t margin-left: 170px; 
 
} 
 
#nav ul li { 
 
\t list-style-type: none; 
 
\t text-align: center; 
 
\t float: left; 
 
\t margin: 0px; 
 
} 
 
#nav ul li a { 
 
\t text-decoration: none; 
 
\t color: #000; 
 
\t text-align: center; 
 
\t display: block; 
 
\t padding: 10px; 
 
\t margin: 0px; 
 
} 
 
#nav ul li a:hover { 
 
\t color: #CD0000; 
 
}

<div id="nav" align="center"> 
 
    <ul> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">TOUR</a></li> 
 
    <li><a href="#">NEWS</a></li> 
 
    <li><a href="#">PRESS</a></li> 
 
    <li><a href="#">PHILANTHROPY</a></li> 
 
    <li><a href="#">JOBS</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</div>

: http://jsfiddle.net/66reH/
결과

CSS/HTML을 보려면

Answer 1

• 0
• 는
• 추가 'text-align: center;ul 선택 CSS
• 제거하는 ul 선택 CSS의 margin-left 속성을 제거
• 가 #nav 선택 CSS에 text-align: center;를 추가 #nav 사업부의 정렬 속성을 제거 li 선택자의 float: left; 속성 CSS
• 추가~ li 선택자 CSS

여기에는 가운데에 메뉴가 없습니다. CSS의 UL 왼쪽에 170px를 추가하기 만하면 이으로 정렬되었습니다. 하지만 그렇지 않았습니다.

DEMO HERE

Answer 2

CSS/HTML 중심에 더 읽기

#nav { 
 
    font-family: Century Gothic, Arial, Helvetica, sans-serif; 
 
    font-size: 15px; 
 
    color: #fff; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-color: #eee; 
 
    padding: 5px; 
 
    height: 38px; 
 
    width: 913px; 
 
    font-weight: bold; 
 
    border-style:solid; 
 
    border-width:4px; 
 
    border-color: #000; 
 
} 
 
#nav ul { 
 
    padding: 0px; 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
} 
 
#nav ul li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    float: left; 
 
    margin: 0px; 
 
} 
 
#nav ul li a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    text-align: center; 
 
    display: block; 
 
    padding: 10px; 
 
    margin: 0px; 
 
} 
 
#nav ul li a:hover { 
 
    color: #CD0000; 
 
} 
 
.outer { 
 
    float: right; 
 
    right: 50%; 
 
    position: relative; 
 
} 
 
.inner { 
 
    float: right; 
 
    right: -50%; 
 
    position: relative; 
 
} 
 
.clearboth { 
 
    clear:both; 
 
}

<div id="nav" align="center"> 
 
      
 
    <div class="outer"> 
 
    <ul class="inner"> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">ABOUT</a></li> 
 
     <li><a href="#">TOUR</a></li> 
 
     <li><a href="#">NEWS</a></li> 
 
     <li><a href="#">PRESS</a></li> 
 
     <li><a href="#">PHILANTHROPY</a></li> 
 
     <li><a href="#">JOBS</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="clearboth"></div> 
 
</div>

demo

:

01,232,739,293,155,174,