2015-01-15 4 views
0

내가 무엇을해도 중심으로 탐색 할 수 없습니다.탐색 표시 줄이 가운데로 이동하지 않습니다

래퍼가 있으며 탐색 모음에이 div에 밑줄이 있습니다. 단추의 맨 위가 둥글어 져서 아래쪽 테두리에서 나오는 것처럼 보입니다.

센터를 배치하는 좋은 방법을 찾으려고 노력했습니다. 많은 사람들이 여백 자동 또는 여백 0 자동을 사용합니다. 다른 사람들도 디스플레이를 인라인 블록과 함께 사용하지만 테두리는 탐색 버튼에서 잘립니다.

<div id="nav"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about me.html">About me</a></li> 
     <li><a href="portfolio.html">Portfolio</a></li> 
     <li><a href="cv.html">CV</a></li> 
     <li><a href="contact.php">Contact</a></li> 
    </ul> 
</div> 

CSS의 : 나는 또한 JS 바이올린에 넣어 한 당신을위한 편의를 위해

#nav { 
    margin: auto; 
    color: #FFFFFF; 
    width: 100%; 
    border-bottom: 1px solid #000000; 
} 

#nav ul { 
    margin: auto; 
    padding-top: 6px; 
    padding-bottom: 8px; 
    padding-left: 5px; 
    list-style:none; 
} 

#nav li { 
    display: inline; 
    width: 120px; 
    margin:0; 
    padding: 10px 5px; 
    border-radius: 10px 10px 0px 0px/10px 10px 0px 0px; 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)),    to(rgb(132,132,132))); 
    background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232)); 
} 

#nav li:last-child { 
    border-right: none; 
} 

#nav a { 
    text-decoration: none; 
    color: #383838; 
    font-weight: bold; 
    font-size: 20px; 
    padding-right: 10px; 
    padding-left: 5px; 
} 

http://jsfiddle.net/ge702rna/

정말 사람이 할 수있는 희망

내 HTML입니다 지금 내 머리에 손을 묶어서 도와주세요.

Probally 나는 단지 뭔가 잘못하고 있습니다.

답변

4

간단히 추가 텍스트 정렬 : 가운데;

#nav { 
    color: #FFFFFF; 
    width: 100%; 
    border-bottom: 1px solid #000000; 
    text-align:center; /* <-- ADD THIS LINE */ 
} 
+0

을 정말 감사합니다. 나는 그것이 단순한 무엇인지 알았다. 내가 할 수있을 때 대답을 받아 들일 것이다. (012 분) – user3398922

+1

주목할 점 :'#nav li '이'display : inline;'으로 설정 되었기 때문에,'li' 요소를'text-align : center; '. –

0

난 그냥 width

에서
#nav { 
margin: auto; 
color: #FFFFFF; 
width: 77%; //changed 
border-bottom: 1px solid #000000; 
} 

당신이 찾고 계십니까 변경 .. DEMO

관련 문제