텍스트 정렬 : 내 탐색에서 센터가 작동하지 않습니다.

Question

내 탐색을 중앙에 놓으려고합니다. CSS text-align : center; 작동 안됨. 어쨌든, 모양 또는 형태로 nav에 영향을 미치지 않는 것 같습니다.

여기 내 HTML입니다 :

#user_nav { 
    height: 60px; 
    border-bottom: 1px solid black; 
    width: 100%; 
} 

#user_nav ul { 
    margin: 0 auto; 
    width: 100%; 
} 

#user_nav ul li { 
    list-style: none; 
    display: inline; 
    text-align: center; 
} 

#user_nav ul li a { 
    padding: 15px 25px 0 0; 
    font-size: 18px; 
    float: left; 
} 

주의 사항 : 나뿐만 수직뿐만 아니라 수평 중앙에있는 링크를 만들려고 노력하고

이

<nav id="user_nav"><ul> 
     <li><a href="#">Friends</a></li> 
     <li><a href="#">Followers</a></li> 
     <li><a href="#">Photos</a></li> 
     <li><a href="#">Interests</a></li> 
</ul></nav> 

여기 내 CSS입니다.

내가 지금하고있는 것보다 더 나은 방법이 있다면 제안을 할 수 있습니다.

도와주세요.

Answer 1

을 Fiddle

CSS

#user_nav { 
    height: 60px; 
    border-bottom: 1px solid black; 
    width: 100%; 
} 

#user_nav ul { 
    margin: 0 auto; 
    width: 100%; 
    text-align: center; 
} 

#user_nav ul li { 
    list-style: none; 
    display: inline-block;  
} 

#user_nav ul li a { 
    vertical-align: middle; 
    padding: 15px 25px 0 0; 
    font-size: 18px; 
    display: block; 
} 

당신은 float``와 함께`텍스트 align`을 사용할 수 없습니다

<nav id="user_nav"><ul> 
     <li><a href="#">Friends</a></li> 
     <li><a href="#">Followers</a></li> 
     <li><a href="#">Photos</a></li> 
     <li><a href="#">Interests</a></li> 
</ul></nav> 

Answer 2

이에 관심이있을 수 : Live demo (click).

#user_nav { 
    height: 60px; 
    border-bottom: 1px solid black; 
    width: 100%; 
} 

#user_nav ul { 
    width: 100%; 
    display: table; 
} 

#user_nav ul li { 
    list-style: none; 
    display: table-cell; 
    font-size: 18px; 
} 

당신이 폭 설정하여 공간 요소를 수작업이 필요합니다 inline-block 사용하는 경우 : Live demo (click).

#user_nav { 
    height: 60px; 
    border-bottom: 1px solid black; 
    width: 100%; 
} 

#user_nav ul { 
    width: 100%; 
} 

#user_nav ul li { 
    list-style: none; 
    display: inline-block; 
    width: 24%; 
    font-size: 18px; 
}