中间垂直对齐内嵌块div

Question

我彼此相邻有2个inline-block div。 左边的一个高度可变，右边的一个按钮里面。

我希望右div始终与左div垂直居中。

外观如下： https : //jsfiddle.net/6xm23fv6/1/

有人知道是否有可能使它们保持inline-block并仍然使一个div相对于另一个div垂直居中吗？

 #container { width: 500px; height: 300px; border: 1px solid grey; } .inlineDiv { display: inline-block; } #inlineDiv1 { border: 1px solid blue; } #inlineDiv2 { border: 1px solid red; } 

 <div id="container"> <div id="inlineDiv1" class="inlineDiv"> <table> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> </table> </div> <div id="inlineDiv2" class="inlineDiv"> <button>Hi</button> </div> </div> 

Answer 1

vertical-align应该工作：

#inlineDiv1 {
  border: 1px solid red;
  vertical-align: middle;
}

小提琴： https : //jsfiddle.net/6xm23fv6/2/

编辑：
对于此后的内联块，我认为我们唯一要“重置”垂直对齐方式的是将前两个包装在也设置为display: inline-block用新的vertical-align: top display: inline-block vertical-align: top

例如： https ： //jsfiddle.net/6xm23fv6/4/

Answer 2

尝试：{vertical-align：middle;}

Answer 3

是的，在两个元素周围添加一个容器，使其display:flex; 。 检查代码段。

 #container { width: 500px; height: 300px; border: 1px solid grey; } .inlineDiv { display: inline-block; } #inlineDiv1 { border: 1px solid blue; } #inlineDiv2 { border: 1px solid red; } .ctn { display:flex; align-items:center; flex-wrap: nowrap; } 

 <div id="container"> <div class="ctn"> <div id="inlineDiv1" class="inlineDiv"> <table> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> <tr> <td>Hi there</td> </tr> </table> </div> <div id="inlineDiv2" class="inlineDiv"> <button>Hi</button> </div> </div> </div>