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将起作用 - ＆gt; http://tinkerbin.com/mxle0LH4。不幸的是宽度会像这样被切掉。最好的方法是，使用行高。但是将它设置在父元素上，而不是单独设置给子元素 - ＆gt; 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>

垂直对齐内联块元素

2 个答案: