다른 div 내부에서 div의 수직 정렬 - 문제

Question

원래 div가 떠 다니기 때문에이 플로트 내부의 내용이 수직으로 정렬되기를 원했습니다.

이렇게하면 문제가 생겨서 수레를 제거해야했습니다.

이 fiddle에 관해서는 post에서 언급했습니다.

그리고 원하는 레이아웃을 얻기 위해 바이올린을 사용했습니다. 하지만 divs를 세로로 정렬하는 데 문제가 있습니다. parent 컨테이너를 들어

내가 시도

vertical-align:middle; 
display:table-cell; 

및 child 내용에 대한

display: inline-block; 

.

1)이 부분은 fiddle입니다. right을 right-container 안에 세로로 정렬하고 싶습니다.

즉 말하십시오. 을 main div 안에 세로로 정렬하고 두 div의 각 div를 세로로 정렬해야합니다.

2) 어떻게 플로트 내부에서 수직 정렬을 할 수 있습니까? 따라서 원래 레이아웃을 변경할 수 없습니다. 오른쪽 및 왼쪽 피들에서 말하십시오 floats입니다.

몇 가지 포인터가 필요합니다.

편집 :

이 테이블 간단 수 있습니다. 하지만 div 기반 솔루션을 찾고 있습니다.

Answer 1

원하는 것이 맞습니까?

추가 : <div id="right" style="display:table-cell;vertical-align:middle;"> RIGHT </div>

jsFiddle 업데이트 : 당신이 지원 IE 버전 5.5, 6 걱정하지 않을 경우이 작동 http://jsfiddle.net/5vpA3/157/