css - 如何使用css垂直对齐混合元素？

Question

所以我的老板对我说，“嘿，你!在我们的网站顶部制作一个横幅，在一行中显示我们的电话号码和我们的时事通讯注册。”虽然我年纪大了而且很容易混淆，但我认为是时候停止使用表格并像上帝预期的那样使用 css 了。

<div id="hdr">
<i>Call us today</i> &nbsp;&nbsp; CorpHQ - nnn.nnn.nnnn &nbsp;&nbsp;
<i>Sign up for our newsletter:</i>&nbsp;&nbsp;
<form action="signup.php" method="post">
<input name="email" type="text">
<input name="submit" type="submit" value="SUBMIT">
</form>
</div>

但是，无论我尝试做什么来使内容垂直对齐，我都会得到各种莫名其妙的结果，具体取决于是否在 Chrome、IE6、IE7 和 Firefox 中查看网站。 (我主要说的是字段和提交按钮的大小和垂直居中。)

1) 这里有我不知道的大 secret 吗？

2) 我应该回到原来的计划使用表格吗？

3) CSS 实际上是外星人发明的一种残忍的把戏，目的是让我们在打印“为人类服务”的副本时有事可做吗？

暂停!

Answer 1

1. 没有
2. 没有
3. 没有

将每个元素放在它自己的 div 中，并将所有这些 div 放在父 div 中。

<div class="wrapper">
  <div class="contact"></div>
  <div class="signup_form"></div>
</div>

现在，您可以根据需要对齐父 div(包装器)，包装器内包含的每个元素将从包装器的位置开始(然后您可以根据需要更改每个元素)。

.wrapper {
  width: 800px;
  margin: 0px auto; /* centered */
}

.contact {
  height: 200px;
  margin-left: 80px; /* will be 80 pixels off of the center */
  float: left; /* placed to the left */
}

.signup_form {
  float: right;
}

现在联系方式和注册表单将在同一行。