真ん中の縦に整列するインラインブロックdiv

Question

私は2つのinline-block divsをお互いに隣り合わせに持っています。左は可変の高さで、右は内側にボタンがあります。

右のdivを常に左のdivと垂直方向の中央に配置します。ここで

は、それがどのように見えるかです：それはinline-blockそれらを維持し、まだ垂直方向に他の1つのdiv相対を中心に可能かどうhttps://jsfiddle.net/6xm23fv6/1/

誰もが知っていますか？

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

EDIT：この後のインラインブロックの場合
を、私たちは「リセットするだけだと思います'垂直方向の整列はブロック内の最初の2つをラップすることですそれはまた、例えば新しいvertical-align: top

でdisplay: inline-blockに設定されています：https://jsfiddle.net/6xm23fv6/4/

Answer 2

はい、両方の要素の周囲にコンテナを追加し、それ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>

Answer 3

試み： {垂直整列：ミドル;}