세로 정렬! div의 세로 높이를 모른 채 작동 시키려면 어떤 방법이든 사용할 수 있습니까?

Question

그래서 나는 다소 이상한 문제에 대해 고심하고 있습니다. 나는 디스플레이에서 모든 것을 시도했다 : span에서의 인라인 블록, vertical-aligns가 center로 설정되어 div : display와 함께 wrapping, table과 child div가 table-cell이지만 아무 것도 수직 정렬에 영향을 미치지 않는 것 같다. !

나는 코드를 jsfiddle : http://jsfiddle.net/rtKra/6/에 추가했습니다. li 위에 마우스를 가져 가면 li 내용이 한 줄에 있으면 왼쪽에 색상 상자가 있어야합니다. 두 줄 이상인 경우 li의 상단이 컨텍스트 상자의 맨 위에 정렬되고 하단이 색상 상자를 초과하므로 문제가되지 않습니다.

까다로운 부분은 'labelDescriptor'div 아래의 'space'는 왼쪽의 색상 상자와 일치해야합니다. 그것이 라인에 올 경우, 내용은 여전히 ​​div의 상단에 정렬 유지!

호버의 배경입니다. 왼쪽의 색상 상자와 같은 높이 여야합니다. 최소 높이 설정은 표/표 셀 디스플레이 없이도 작동하지만 내용의 하단에서 div의 바닥까지 여전히 많은 공간을 가지고있어 조금 보입니다.

단순 패딩은 자르지 않습니다. 작은 리튬 (내용이 적은)에서 효과가 있긴하지만 다음 줄로 나뉘는 것들을 보입니다!

저는 지금 꽤 오래 동안 일해 왔으며 거의 ​​포기했습니다 !!! 나는 일을 할 수없는 것 같아!

div의 내용을 < p> 태그로 묶었지만 위와 아래에 너무 많은 공간을 추가하여 모든 것을 완전히 엉망으로 만듭니다. 나는 그것을 위해서 글꼴 크기를 날려 버리는 것을 원하지 않는다.

아이디어가 있으십니까? 그것은 간단한 CSS를 사용하여 고정 수 또는 자바 스크립트/jquery 사용해야 할까?

html + css 코드는 여기에 게시하기에는 너무 길어집니다. 하지만 내가해야 할 일이 있다면 ...

** 업데이트 : ** 여기에 이미지가 어떻게 보이고 무엇을 할 수 있었는지에 대한 이미지가 있습니다. 바로 http://jsfiddle.net/rtKra/9/)

내가이 '모양과 느낌'왼쪽으로 Gmail의 라벨 메뉴의 복제하고자하는 것입니다. 텍스트가 '색상 상자'와 얼마나 잘 정렬되어 있는지 확인하십시오 (색상 상자 위로 전체 마우스 오버하지 않아도 됨). 중간 이미지는 정렬이 어떻게 꺼져 있는지 보여줍니다. 텍스트가 최소 높이의 div에 집중 될 것인가 : 16px는 잘 정렬됩니다. 그러나 그것은 일어나지 않으며 시각적으로 소름 끼치는 것처럼 보입니다. 오른쪽 이미지는 글꼴 크기를 16px로 변경하고 색상 상자 (빨간색) 너비 및 높이 = 1em을 만들고 3px (위 : 3px)만큼 아래로 이동 한 후의 이미지입니다. -이 문제는 여전히 피할 수있었습니다. 처음에는 div에 세로로 가운데가있는 내용 만 있습니다. 글 머리 기호의 "줄 수"와 관계없이 내가 한 것처럼 주변을 해킹 할 필요없이 '잘 정렬'됩니다.테이블 셀과 수직 정렬을 적용 : 그건 당신이 표시 될 컨테이너를 설정해야 내가해야 할 :)

Answer 1

나는 당신이 무언가를 원한다고 생각한다 like this. 작업을 보려면 글꼴 크기를 편집하십시오.

주요 속성은 다음과 같습니다

.category { 
    position: relative; 
} 
.category .labelColorPicker { 
    width: 16px; 
    height: 16px; 
    border: 1px solid black; 
    vertical-align: top; 
    padding: 0; 
    margin: 0; 
} 
.category .labelDescriptor { 
    border: 1px solid transparent; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 16px; 
    min-height: 16px; 
} 
.category .hoverMenu { 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 

는 IE8, IE9, 오페라 11.50, 사파리 5.0.5, FF 5.0, 크롬 12.0 Win7에에서 테스트. 인라인 블록이 IE7에서 완전히 작동하지 않기 때문에 두 개의 IE7 패치 라인을 CSS에 추가했습니다.

Answer 2

를 원하는 것을 명확히 희망

check the div containing the text on the left

에 중간이 또한 저를 몰았다 frikkin 미친