DIV에

Question

이 http://ilikeyou.tk/763/에서 발견 나의 다음/이전 탐색을위한 코드를 수직-맞 춥니 다. 나는 작동하지 않았다 vertical-align:middle;를 사용해 보았다. 나도 top:50%;를 시험해 보았다. 그러나 그것은 직업도하지 않았다.

.navigation { 
    position: relative; 
    float: left; 
    vertical-align : middle; 
    height: auto; 
    padding: 0; 
    margin: 0 -20px 0 -22px; 
    width: 636px; 
    z-index:1; 
} 

.navigation a.prev{ 
    background: url('images/nav_left.png'); 
    float: left; 
    width: 50px; 
    height: 50px; 
    margin-left:10px; 
} 

.navigation a.next { 
    background: url('images/nav_right.png'); 
    float: right; 
    width: 50px; 
    height: 50px; 
    margin-right:10px; 
} 

감사 :

여기 내 CSS입니다!

Answer 1

콘텐츠 영역의 높이가 매우 고정적이지는 않습니다.

http://jsfiddle.net/aBzhu/

트릭이 유일한 작품은 세로로 가운데에 맞출 요소가 고정 될 때 당신이 position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

참고로 중앙하려는 position: relative; float: left;로 설정 외부 요소 다음 요소를 가지고있다 신장. 내 생각에 맞게 사용해야한다.

편집 : 아 .. 그리고 나는 이것이 ie6에서 반드시 작동한다고 생각하지 않습니다. 그러나 작업 IE7 +

Edit2가 작업을 수행합니다 개봉 된 같은 아주 작은 방법에 관심이없는 당신이 솔루션은 작은 텍스트 완벽하게 나를 일치 Using jQuery to center a DIV on the screen

Answer 2

vertical-align은 테이블 셀 렌더링을위한 것이며, 심지어 이것은 상당히 문제가됩니다. 네비게이션 상단 패딩의 픽셀 몇 개를 추가하면 안될까요? ul? 실제 센터링이 아니지만 네비게이션 배경에 고정 높이 그래픽을 사용할 때 dunamic 스케일링에 대해 걱정하지 않아도됩니다.

Answer 3

를이 체크 아웃해야합니다 또한합니다. DIV 내부의 링크 또는 텍스트 일지라도이 CSS 클래스는 DIV 내부의 내용을 수직 정렬 할 수 있습니다. .... ADynaMic

감사합니다,