Question

我构建了一个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;
}

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

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

<强> Demo

如果您希望保留原始span行高以供将来使用，也可以将其包装在h4中并为其指定一个特定类的行高。

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

3 个答案: