왜 요소가 정확히 중앙에 있지 않습니까?

Question

나는 ul 요소에있는 URL 목록을 가지고 있으며 한 줄에 목록을 원합니다. 나는 페이지의 중앙에 그들을 놓기 위해 this way을 시도했다. 그러나 그들은 정확하게 센터에 없다.

이

는 HTML 코드

<ul id="links"> 
    <li class="inner-li"> <a href="about">about</a> 

    </li> 
    <li class="inner-li"> <a href="http://ahmadalli.net/projects">projects</a> 

    </li> 
    <li class="inner-li"> <a href="http://photo.ahmadalli.net">photoblog</a> 

    </li> 
    <li class="inner-li"> <a href="music">music</a> 

    </li> 
</ul> 

이며, 이것은 내가

.inner-li { 
    font-size: 1.25em; 
    float: left; 
    margin-left: 1em; 
    list-style-type: none; 
} 
@media screen and (min-width: 21em) { 
    #links { 
     width: 21em; 
     margin: 0 auto; 
    } 
} 

을 시도한 스타일이며 JsFiddle에서 볼 수 있습니다.

Answer 1

같은 #links에 display:table 및 padding:0 추가 : 추가 또한

@media screen and (min-width: 21em) { 
    #links { 
     display:table; 
     margin: 0 auto; 
     padding: 0; 
    } 
} 

#links > li:first-child{ 
    margin:0; 
} 

원인 첫번째 li 요소 필요가 없습니다에를 margin-left

있다3210

fiddle

Answer 2

이 코드를 CSS 파일에 추가하십시오 :

너는 너의 메뉴 폭 및 다른 필요한 부호를 정의해야한다.

당신이 <li> 's의 margin-left을 적용했기 때문에 그것은 중심 아니에요

#links { 
    min-width: 100%; 
} 

Answer 3

.

.inner-li { 
font-size: 1.25em; 
float: left; 
margin-left: 1em; /* this */ 
list-style-type: none; 
} 

첫 번째 <li> 1em을 가운데에서 밀어냅니다.

padding: 0 .5em 대신에 동일한 레이아웃을 중앙에 배치 할 수 있습니다.

Demo