我有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>
好吧,抱歉的问题不指定这一点,但如果我有另一个'的直列block' DIV右边是否有一种方法可以取消'vertical-align:middle;',使它与左边的div顶部对齐?即只是中间的div是垂直居中的 – MarksCode
我能想到的唯一方法就是将前两个包装在他们自己的内联单元中。见上面的其他小提琴。 –
其实我发现了如何,我只是把'vertical-align:top'放在最后一个。 – MarksCode