css - 无法水平对齐 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 (边框添加到可见性)