html - 垂直对齐行内块元素

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

这是一个很好的方法。您也可以添加display: table-cell到父 div，在这种情况下，vertical-align: middle 可以工作 -> 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>
​