세로 중심의 유사 요소 CSS 높이가 '독립적 인'화살표

Question

항목 높이에 관계없이 각 목록 항목에 수직으로 정렬되도록 CSS 화살표 의사 요소를 가져 오려고합니다. 이것은 드롭 다운을위한 것이며 일부 항목은 한 줄보다 길 수도 있습니다. 나는 css only 메소드가있을뿐만 아니라 다른 고정 된 높이를 기반으로하지 않기를 바랬다. (리스트 아이템이 3 라인 길이라면 작업하고 싶다.) 아래 전체 jsbin을 포함시켰다.

여기에 무엇 (맨 윗줄) 지금 무슨 일이 일어나고 무엇을 내가 (아래) 달성하기 위해 노력하고 있어요 : 내가 얻을 중 단일 또는 여러 줄 항목이 될 수있는 고정 여백 값을 사용하여 다시

http://f.cl.ly/items/0p02081n2E1J2j2U193q/navhelp.gif

나는 여러 가지 클래스를 사용하는 것을 피하려고합니다. 가능할 때마다 다른 클래스를 생성해야하기 때문입니다.

http://jsbin.com/eqilok/17/edit

귀하의 도움에 감사드립니다. 정말 고마워. 여기

Answer 1

: 우리는 화살표 (32px)의 높이를 알고 있기 때문에 http://jsbin.com/eqilok/20/edit

.dropdown .levelonelink { position: relative; } /* added */ 

.dropdown .levelonelink:hover:after { 
    content: " "; 
    border-color: transparent transparent transparent purple; 
    border-style: solid; 
    border-width: 16px; 
    height:0; 
    width:0; 
    /* margin-top:-32px; removed */ 
    /* right:-32px; removed */ 
    position: absolute; 
    right: -32px; /* added */ 
    top: 50%; /* added */ 
    margin-top: -16px; /* added */ 
} 

이 작동합니다. 목록 항목에 위치를 지정하여 목록 항목에 대해 절대적으로 배치되도록 한 다음 각 li 높이의 화살표를 위쪽에서 50 % 배치하십시오. 이제 화살표의 상단은 lis의 수직 중심에 있지만 너무 낮습니다. 따라서 높이를 반으로 늘리십시오 (16px).