2017-07-27 93 views
0

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

回答

2

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/

+0

好吧,抱歉的问题不指定这一点,但如果我有另一个'的直列block' DIV右边是否有一种方法可以取消'vertical-align:middle;',使它与左边的div顶部对齐?即只是中间的div是垂直居中的 – MarksCode

+0

我能想到的唯一方法就是将前两个包装在他们自己的内联单元中。见上面的其他小提琴。 –

+1

其实我发现了如何,我只是把'vertical-align:top'放在最后一个。 – MarksCode

0

是,添加一个容器元素都围绕并使其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>

1

尝试: {垂直对齐:中间;}