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

所以我的老板对我说：“嘿，你！让我们的网站顶部有一个横幅，上面有我们的电话号码和我们的通讯报名单。”虽然我年纪大了，容易感到困惑，但我认为现在是时候停止使用桌子了，并且像上帝打算的那样用CSS来做。如何使用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）这里有一个我不知道的大秘密吗？

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

3）CSS是否真的是空间外星人发明的残酷技巧，当我们打印“To Serve Man”的副本时让我们保持占领？

Halp！

来源

2010-05-24 CSS Victim

可以肯定的是，不要混合垂直和水平？我很难理解和可视化最终结果。一些sketchup（paint？ASCII？）可能会有很大帮助。 – BalusC 2010-05-24 17:25:10

发布一些CSS，如果你愿意。并且，作为黑暗中的刺，尝试更改元素/容器上的行高以获得一致的垂直对齐（例如，所有内容都以行高为中心） – 2010-05-24 17:25:23

在ASCII中：立即致电我们CorpHQ - nnn .nnn.nnnn订阅我们的新闻邮件：_f_i_e_l_d_提交只是一行东西横贯。我想念桌子。 *嗅探* – 2010-05-24 17:42:14

没有
没有
没有

将在它自己的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; 
}

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

来源

2010-05-24 17:25:05

我试过了一个变种，其中文本是在一个包装，在另一个领域，并在另一个提交按钮 - 它看起来很棒的Chrome，但是当我去了IE7没有像我预期的垂直对齐。我曾希望我错过了谈论一个神奇的CSS命令的课程，它会这样做，呃，呃像一张桌子一样。我会回去添加额外的包装，看看我能否确定我最大的绊脚石。 – 2010-05-24 17:39:06

如果你这样做，尝试将边距设置为0px'margin：0px;'由于未被注意到的间距，您可能会遇到对齐问题。 – 2010-05-24 17:43:27

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

<input name="email" type="text"> 
<input name="submit" type="submit" value="SUBMIT"> 
</form> 
</div>

窗体显示为块。所以它会跳到下一行。这只是一个快速+脏的修复。您应该使用标签，停止使用<i>，停止使用 作为间距，可能还有其他人我不知道。哦，还要确保你不在quirks mode。

来源

2010-05-24 17:25:44 nc3b

KK，作为块的形式回答未经询问的问题。谢谢。我保证在我获得下一笔薪水后，我会放弃和。不要把我推得太厉害：我可能会掉下来，从不站起来。 ;） – 2010-05-24 17:32:15

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

回答

相关问题