수직으로 내가 그렇게 할 수 있다고 생각했다

Question

인라인 블록 요소 정렬 :

<div style='height:100px;vertical-align:middle;border:1px solid red;'> 
    <div style='display:inline-block;'>hi there</div> 
    <div style='display:inline-block;'>hi there</div> 
    </div> 

을하고 div의 내부 중앙에 수직으로 정렬 얻을 것이다, 그러나 어떤 이유로이, 작동하지 않습니다 내가이 atm을 달성하는 유일한 방법은 (line-height = height를 사용하여) 다음과 같이 행한다 :

<div style='height:100px;border:1px solid red;line-height:100px;'> 
    <div style='display:inline-block;'>hi there</div> 
    <div style='display:inline-block;'>hi there</div> 
    </div> 

무엇이 적절한 방법인가?

Answer 1

이렇게하는 것이 좋습니다. 또는 보조 div에 display: table-cell을 추가 할 수 있습니다.이 경우 vertical-align : middle이 작동합니다 ->http://tinkerbin.com/mxle0LH4. 불행히도 너비가 이렇게 잘립니다. 가장 좋은 방법은 라인 높이를 사용하는 것입니다. 하지만 아이들에게하지 개별적으로, 부모 요소에 설정 -

Answer 2

http://tinkerbin.com/ssvg8yPX 나는이

.inner { 
    display:  inline-block; 
    padding-top: 40px; 
    padding-bottom: 40px; 
}​ 
​ 
​<div style="border:1px solid red;"> 
    <div class="inner">hi there</div> 
    <div class="inner">hi there</div> 
</div> 
​