中間垂直對齊內嵌塊div

我有2 inline-block div彼此相鄰。左邊的是高度可變的，右邊是內部的按鈕。中間垂直對齊內嵌塊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>

來源

2017-07-27 MarksCode

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/

來源

2017-07-27 18:46:29

好吧，抱歉的問題不指定這一點，但如果我有另一個'的直列block' DIV右邊是否有一種方法可以取消'vertical-align：middle;'，使它與左邊的div頂部對齊？即只是中間的div是垂直居中的 – MarksCode

我能想到的唯一方法就是將前兩個包裝在他們自己的內聯單元中。見上面的其他小提琴。 –

其實我發現瞭如何，我只是把'vertical-align：top'放在最後一個。 – MarksCode

是，添加一個容器元素都圍繞並使其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>

來源

2017-07-27 18:51:03 Varin

嘗試： {垂直對齊：中間;}

來源

2017-07-27 19:03:53

中間垂直對齊內嵌塊div

回答

相關問題