中间垂直对齐内联块div

Question

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

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

以下是它的外观：https://jsfiddle.net/6xm23fv6/1/

有人知道是否可以保留它们inline-block并且仍然相对于另一个垂直居中一个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

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

Answer 2

尝试： {vertical-align：middle;}

Answer 3

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

＆＃13;

＆＃13;

#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;
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;