如何將我的文字與按鈕垂直對齊？

我構建了一個HTML橫幅廣告，並希望垂直對齊文本與按鈕。在我的示例中查看文本如何與按鈕頂部對齊？我想在中間調整它。如何將我的文字與按鈕垂直對齊？

<div id="wrapper-landing"> 
<div class="box-row"> 
    <div class="box-form-body"> 
     <h4>See What You're Missing</h4> 
    </div> 
    <div class="box-form-button"> 
     <img src="http://www.ei.edu/wp-content/uploads/2013/03/button_submit.jpg" /></div> 
    </div> 
</div> 


#wrapper-landing { 
    width: 916px; 
    margin: 0 auto 50px auto; 
    padding: 0; 
} 

.box-form-body { 
    float: left; 
    display: block; 
    width: 75%; 
    padding: 0 0 0 2em; 
    border:1px solid #e2e3e4; 
} 

h4 { 
    font-size: 1.05em; 
    margin: 0 0 2px 0; 
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif; 
    font-weight: normal; 
} 

.box-form-button { 
    float: left; 
    display: block; 
    width: 15%; 
    border:1px solid #e2e3e4; 
    padding: 0 0 0 3em; 
} 

.box-row { 
    width:100%; 
    padding:10px; 
    border:1px solid #e2e3e4; 
    margin:0px; 
    overflow: hidden; 
    background-color:#f66511; 
}

來源

2014-02-27 user3075987

我更新了我的jsfiddle：http://jsfiddle.net/3PTtv/74/ 文本在中間，但按鈕不是。它在橫幅上高於文字。如何讓按鈕處於完全垂直的中間位置？ – user3075987

您可以將包裝<div>元素的顯示類型更改爲inline-block，並將它們在中間垂直對齊vertical-align: middle;。

在這裏你去：

.box-form-body, .box-form-button { 
    display: inline-block; 
    vertical-align: middle; 
} 

.box-form-body { width: 75%; } 
.box-form-button { width: 15%; }

Working Demo

注意，有內嵌（嵌段）元素之間的空白。我已經通過刪除這兩個HTML元素之間的空格字符和製表符來解決這個問題。另外，還有5px gap underneath the image。這是因爲圖像（內聯元素）在默認情況下與其基線對齊（它屬於行高保留字符）。

可以由圖像豎直對準如下除去間隙：

.box-form-button img { 
    vertical-align: bottom; 
}

Updated Demo。

來源

2014-02-27 17:41:33

關於空白問題的更多細節，你可以參考[這個答案]（http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532）。 –

該按鈕不在完全垂直的中間。它比文本高。我怎樣才能得到它在中間？ – user3075987

@ user3075987我已經更新了答案。 –

http://jsfiddle.net/3PTtv/67/

試試這個CSS：

h4 { 
    font-family: "HelveticaNeueW01-75Bold",Helvetica,"Helvetica Neue",Arial,sans-serif; 
    font-weight: normal; 
}

如果不能滿足您的需求，讓我知道，我將編輯我的答案和的jsfiddle如果必要。

來源

2014-02-27 17:37:33

簡單的答案就是給你h4一個line-height：

h4 { 
    line-height: 2.4; 
}

Demo

你也可以把它包在一個span，並給它一類特定的line-height，如果你想保留原始的h4行高供將來使用。

來源

2014-02-27 17:44:45 Xareyo

如何將我的文字與按鈕垂直對齊？

回答

相關問題