2012-06-02 2 views
0

안녕하세요, 정렬되지 않은 목록의 가운데에 수직으로 앵커 태그를 가져올 수 없습니다. 여기 그런CSS 세로 가운데 인라인 요소?

*{ margin: 0; padding: 0;} 

html { 
    height: 100%; 
    font-size: 16px; 
} 

body { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 62.5%; 
    background-color:rgba(0,0,0, 0.7); 
    height: 100%; 
} 

.container { 
    margin-left: 9.814814814814815%; /* 106/1080 */ 
    margin-right: 10.092592592592593%; /* 109/1080 */ 
    width: 80%; /* 864/1080 */ 
    height: 100%; 
} 

nav ul{ 
    list-style-type: none; 
} 

nav ul li { 
    display: inline-block; 
} 

nav ul li a { 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 2em; 
} 

nav { 
    background-color: black; 
    margin-top: 5.0595238095238096%; /* 85/1680 */ 
    height: 5.476190476190476%; /* 92/1680 */ 
} 

내 HTML입니다 : 내 CSS는

nav ul li a { 
    color: white; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 2em; 
    padding: 10px 0; 
} 

당신을 :

<div class="container"> 
    <nav> 
     <ul> 
      <li><a href="/">home</a></li> 
      <li><a href="/get_involved">get involved</a></li> 
     </ul> 
    </nav> 
</div> 
+2

문제를 보여주는 http://jsfiddle.net/ 데모를 만들 수 있습니까? – thirtydot

+0

어떨까요''margin-left : auto; 마진 - 오른쪽 : 자동차''에''룰리? '? –

+0

@thirtydot [jsfiddle] (http://jsfiddle.net/LHGNr/1/) – camelCaseD

답변

0

<a> 요소 라인 높이 또는 패딩 하나를 추가, "수직 중심"을 달성하기 위해 "센터링"을 미세 조정하려면 상위 <li> 요소의 높이를 조정할 수도 있습니다.

+0

입니다. @ Lonhardt Wille 솔루션도 잘 작동합니다. – camelCaseD

관련 문제