如何使用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垂直對齊混合元素？

回答

相關問題