如何使文本与按钮垂直对齐？

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;在中间将它们垂直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%; }

工作演示

请注意，inline（-block）元素之间有一个空格。 我已通过删除这两个HTML元素之间的空格字符和制表符来解决此问题。

此外， 图片下方还有5px的间隙 。 这是因为图像（内联元素）默认情况下在其基线中对齐（它属于行高保留字符）。

您可以通过如下方式垂直对齐图像来消除间隙：

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

更新了演示 。

Answer 2

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

试试这个CSS：

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

如果这不适合您的需求，请告诉我，如有必要，我将编辑答案和JSFiddle。

Answer 3

简单的答案是给h4一个line-height ：

h4 {
    line-height: 2.4;
}

演示

如果您想保留原始的h4线高以备将来使用，也可以将其包装在span并为其指定类的线高。