вертикально совместив встроенный блок элементов

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 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

Это хороший способ сделать это. Вместо этого вы можете добавить display: table-cell в родительский div, и в этом случае будет выполняться вертикальное выравнивание: среднее ->http://tinkerbin.com/mxle0LH4. К сожалению, ширина вырезается так. Лучше всего, да, использовать высоту линии. Но установить его на родительский элемент, а не индивидуально для детей ->http://tinkerbin.com/ssvg8yPX

Answer 2

Я использую этот

.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> 
​