수직 ... 내가 정렬되지 않은 목록을

사업부 내에서수직 ... 내가 정렬되지 않은 목록을

<ul class="hide"> 
    <li class="home"> 
    <div class="link"> 
     <a href="/">Home</a> 
    </div> 
    </li> 
    <li class="about"> 
    <div class="link"> 
     <a href="/about">About Our Community</a> 
    </div> 
    </li> 
    <li class="contact"> 
    <div class="link"> 
     <a href="/contact">Contact Us</a> 
    </div> 
    </li> 
</ul>

내 CSS는 다음과 같습니다

....

#sitenav ul li .link a { 
    color: #555; 
    text-decoration: none; 
    float: left; 
    padding-right: 3px; 
    margin-top: auto; 
    margin-bottom: auto; 
}

을 링크를 중심 그러나 마진은 수직 링크를 중심으로하지 않습니다

아이디어가 있으십니까?

출처

2012-06-13 Jackie

링크 텍스트는 항상 한 줄로 표시됩니까? 아니면 줄 바꿈이 발생하면 좋을까요? –

링크가 한 줄로 만 표시되는 경우 - http://jsfiddle.net/SE7aB/ –

왜 div가 있습니까? 당신은 li을 직접 스타일링 할 수 있습니다. 또한 링크가 "정렬되지 않음"이되게하는 코드를 제공하십시오. – Andre

이 솔루션은 당신을 위해 일할 수 : http://jsfiddle.net/WLQAS/8/

margin-top: auto; 및 margin-bottom: auto; 수직으로 오브젝트를 정렬 작동하지 않습니다.

업데이트 CSS

li { 
    color: #555; 
    text-decoration: none; 
    float: left; 
    padding-right: 3px;  
} 

.link { 
    vertical-align: middle; 
    display: table-cell; 
    height: 50px; 
}

출처

2012-06-13 16:30:52 Luis

폭을 추가하여 변경하면 하나의 "줄"이되도록하고 싶습니다 : 20 % 그것 다시 ... http://jsfiddle.net/WLQAS/2/ – Jackie

@ 재키이 대답은 당신의 문제를 해결한다고 생각합니다. Luis 코드를 http://jsfiddle.net/WLQAS/7/에 한 줄로 조정할 수 있습니다. 콘테이너가 내용을 담을 수있을만큼 넓 으면 한 줄에 있어야합니다. –

여기의 문제는 보편적 인 너비가 아니며 작은 화면에 텍스트를 한 줄로 제한하는 것이 좋지 않을 수도 있습니다. – Jackie

여기에 수직이 div 내에서 알 수없는 높이와 함께 a - 요소를 정렬하기위한 크로스 브라우저 호환 솔루션입니다 :와 라인없이 링크 텍스트와

작품은 - 새벽.

여기에 CSS 해킹을 사용하는 대신 conditional comments를 사용하지 않는 것이 좋습니다

* { margin: 0; padding: 0 } 

ul {} 
ul li { 
    display: table; 
    height: 75px; 
    #position: relative; /* ie hack */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

ul li div { 
    #position: absolute; /* ie hack */ 
    #top: 50%; /* ie hack */ 
    display: table-cell; 
    vertical-align: middle; 
} 

ul li div a { 
    #position: relative; /* ie hack */ 
    #top: -50%; /* ie hack */ 
    border: 1px solid green 
}

CSS.

라이브 데모 :이 트릭에 대한 http://jsfiddle.net/ahdzg/1/
더 많은 정보를 정기적으로 :이 도움이 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

희망. 그렇지 않으면 물어보십시오.

출처

2012-06-13 20:55:41

li의 요소를 변환했습니다. div에요. 여전히 잘 작동합니다. –

수직 ... 내가 정렬되지 않은 목록을

답변

관련 문제