无法水平对齐div

Question

我有两个div，我想水平对齐它们。我这样做：

CSS：

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
}

HTML：

<div class="horidiv">
    <textarea></textarea>
    <br>
    <input type="text">
    <br>
    <div id="sendbutton">Send</div>
</div>
<div class="horidiv">
    <iframe width="300" height="225" frameborder="0" style="border:0" src="<gMapsAPI"></iframe>
    <p>Some lines of text</p>
</div>

我需要改变什么？

Answer 1

缺少vertical-align:top;

.horidiv {
    display: inline-block;
    width: 20em;
    height: 20em;
    border:1px solid #999;
    vertical-align:top;
}

jsFiddle example （边框添加到可见性）