CSS 위치 앵커가 수직

Question

나는 수평 탐색 메뉴를 만들고 있어요 정렬하고, 내가 CSS를 사용하여 div의 내부에 수직으로 앵커를 중심 싶어, 내가 가진 것은 이것이다 높이 (a, li 및 ul)가 15이고, 내 UL 높이가 45이므로 li가 ... 앵커 높이가 설정되어 있지 않습니다. 어떻게 수직으로 중심을 잡을 수 있습니까? 당신이 수직으로 리튬의 내에서 정렬 된 앵커를 원하는 뜻 가정 그런데

ul.dropdown { 
    font: bold 12px tt0142m, FuturaM, "Trebuchet MS", sans-serif; 
    text-transform: uppercase; 
    display: block; 
    height: 45px; 
    padding: 0px; 
    line-height: 15px; 
    vertical-align: bottom; 
/* border: 1px solid green; */ 
} 
ul.dropdown li { 
    padding: 0px; 
    margin: 0px; 
} 
ul.dropdown a { 
    text-decoration: none; 
    vertical-align: middle; 
    color: #000; 
} 

ul.dropdown li { 
    word-wrap: break-word; 
    width: 120px; 
    text-align: center; 
    font: FuturaM; 
    border-left: 2px solid #000; 
    line-height: 15px; 
    height: 45px; 
} 
ul.dropdown > li:last-child { 
    border-right: 2px solid black; 
} 
ul.dropdown li a { 
    display: block; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    color: #000; 
    font-weight: bold; 
} 

, 지금 모든 링크가 수직으로 상단

Answer 1

한가지 방법은 테이블 표시 방식을 변경하고 요소의 높이를 강제로

,

ul.dropdown li { 
display: table; 
min-height: 45px; 
} 
ul.dropdown li a { 
display: table-cell; 
height: 45px; 
vertical-align: middle; 
} 

과 같이 그 일에 대한 문제는 IE7과 IE6은

ul.dropdown li { 
position: relative; 
display: block; 
} 
ul.dropdown li a { 
position: absolute; 
top: 50%; 
display: block; 
} 
ul.dropdown li a <new extra element that you do not yet have> { 
position: relative; 
top: -50%; 
} 

Answer 2

에 정렬 .. :

이 내 CSS입니다 .

ul.dropdown li { 
posiiton:relative; 
} 
ul.dropdown li a { 
height:25px; /* change as needed */ 
position:absolute; 
top:10px; /* change as needed */ 
} 

Answer 3

가장 좋은 방법은 li의 display: table-cell;을 확인하는 것입니다 특별한 스타일을 필요로한다는 것입니다. 표 요소는 현재 중간에 콘텐츠를 수직 정렬 할 수있는 유일한 가사입니다 (적절한 지원 범위 내)

여기에 a jsfiddle that demonstrates this입니다. display: table-cell은 IE7에서 지원되지 않지만 IE7에서 지원하지 않는 :last-child을 사용하면 문제가 있다고 생각하지 않습니다.