html - 如何将我的文本与按钮垂直对齐？

Question

我制作了一个 HTML 横幅广告，并希望将文本与按钮垂直对齐。在我的示例中看到文本如何与按钮的顶部对齐？我想将它恰好对齐在中间。

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

<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;
}

Answer 1

您可以更改包装器的显示类型 <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

请注意，内联( block )元素之间有一个空白。我已经通过删除这两个 HTML 元素之间的空格字符和制表符来解决这个问题。

此外，还有一个 5px gap underneath the image .这是因为图片(行内元素)默认是基线对齐的(属于行高保留字符)。

您可以通过垂直对齐图像来消除间隙，如下所示:

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

Updated Demo .