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

【问题标题】：How do I vertically align my text with the button?如何将文本与按钮垂直对齐？
【发布时间】：2014-02-28 02:26:58
【问题描述】：

我制作了一个 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;
}

【问题讨论】：

我更新了我的 jsfiddle：jsfiddle.net/3PTtv/74 文本在正中间，但按钮不在。它在横幅上比文字更高。如何让按钮位于确切的垂直中间？

标签： html css

【解决方案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

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

此外，还有一个5px gap underneath the image。那是因为图片（内联元素）默认对齐在它的基线上（属于行高保留字符）。

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

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

Updated Demo.

【讨论】：

关于空白问题的更多细节，您可以参考this answer。
按钮不在正中间。比正文还高。我怎样才能把它放在正中间？
谢谢。你认为我整理的代码是最佳实践吗？我将在以后的横幅广告中使用此代码。
@user3075987 好吧，最佳实践是一种基于意见的问题；顺便说一句，我可能会或可能不会完全不同，但我在您的代码中看不到任何问题或 不良做法。只需删除无用的 CSS 声明，例如 .box-row 的 overflow: hidden;（因为它没有浮动子项），将选择器分组以删除重复的样式。

【解决方案2】：

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

试试这个 CSS：

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

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

【讨论】：

【解决方案3】：

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

h4 {
    line-height: 2.4;
}

Demo

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

【讨论】：