div를 outter div의 전체 높이를 채우고 가운데에서 수직으로 정렬하는 방법은 무엇입니까?

Question

나는 비슷한 스타일의 HTML을 가지고있다. (나는 외부 스타일 시트를 사용하지만,이 예제에서는 더 쉽게 읽을 수 없다.) "더 큰"div는 여러 줄의 텍스트를 동적으로 가져오고 "더 작은"은 항상 단 한 줄을 갖습니다. 그러나, "더 작은"div의 텍스트를 "더 큰"div의 왼쪽 중간에 정확히 정렬 시키길 원합니다. 나는 display : table과 display : table-cell을 사용할 수 없다. 왜냐하면 jquery slidedown 함수를 사용하여 "wrapper"div를 표시하고 "wrapper"를 display : block으로 강제하기 때문이다. 이렇게하는 방법에 대한 도움을 주시면 감사하겠습니다.

<div class="wrapper"> 
    <div class="smaller"style="float: left; min-height: 100%;"> 
     <p style="vertical-align: middle;">Heading</p> 
    </div> 
    <div class="bigger" style="float: right;"> 
     <p>text1</p> 
     <p>text2</p> 
     <p>text3</p> 
    </div> 

</div> 

Answer 1

인라인 스타일은 사용하지 마십시오. 당신은 수업을 가지고 있습니다. 또한 vertical-align:center도 없습니다. 여기를보세요 :

HTML

<div class="wrapper"> 
    <div class="smaller"> 
     <p>Heading</p> 
    </div> 
    <div class="bigger"> 
     <p>text1</p> 
     <p>text2</p> 
     <p>text3</p> 
    </div> 

</div> 

CSS

.wrapper{ 
    display: table; 
} 

.smaller{ 
    min-height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    width: 97%; 
} 
.bigger{ 
    height: 100px; 
    display: table-cell; 
} 

을 당신이 이것을 달성하기 위해 display:table 및 display:table-cell를 사용할 수 있습니다. .wrapper가 높이 그것에 의존하기 때문에

fiddle

Answer 2

당신은, .bigger이 떠 싶지 않아요. 이 같은 것을 시도하십시오 fiddle.