HTML：
<div id='Content'>
<div>
<div>
<pre>SOME TEXT</pre>
<div id='map1' style='width:450px;height:350px;'></div>
</div>
<div>
<pre>SOME TEXT</pre>
<div id='map2' style='width:450px;height:350px;margin-left:-17px;'></div>
</div>
</div>
<div style='width:300px;'>
<h1>Contact Us</h1><br>
<form action="/Account/Contact" onsubmit="return SubmitMessageForm(this,event,this.childNodes[1]);" method="post">
<pre style="display:none;"></pre>
<label>
<span>Person To Email</span>
<select name='ToContact' id='ToContact'>
<option value='0'>Mark</option>
<option value='1'>Paul</option>
</select>
</label>
<label>
<span>Name</span>
<input type="text" id="Name" name="Name"/>
</label><br>
<label>
<span>Your Email</span>
<input type="email" id="Email" name="Email"/>
</label><br>
<label>
<span>Message</span>
<textarea name="Message" rows="8" id="Message"></textarea>
</label><br>
<label><input style='width:50px;' type="submit" value="Send"/></label>
</form>
</div>
</div>
CSS：
body > div#Content {
text-align:center;
white-space:nowrap;
}
body >div#Content >div {
display:inline-block;
}
body >div#Content >div >div {
}
body >div#Content >div >div >pre {
line-height:20px;
margin-right:50px;
}
body >div#Content >div >div >div {
display:inline-block;
}
body >div#Content >div >div >h1 {
font-size:20px;
}
body >div#Content >div >form {
width:100%;
}
body >div#Content >div >form >label {
float:left;
}
body >div#Content >div >form >label >span {
float:left;
}
body >div#Content >div >form >label >input, body >div#Content >div >form >label >textarea, body >div#Content >div >form >label >select {
width:300px;
float:left;
}
我试图并排显示两个 div 元素，但由于某种原因，第二个 div 被向下推了大约 500px。如何让这两个元素并排排列，同时在父 div 的中心对齐？当我尝试删除 display:inline-block 并添加 float left 它不居中
