css - 在同一行上垂直居中两个 div 之一？

Question

我们怎样才能让文本“Create New Position”垂直居中？

HTML/CSS 如下。

将 margin-top:5px 添加到“Create new..”div 会有所帮助，但看起来很老套。

<div style="margin-top:5px">
  <div style="float:left">Create new position</div>
  <div style="float:right"><input type="submit" id="x" value="Save"></div>
  <div style="clear: both;"></div>
</div>

Answer 1

以下内容将基于创建一个对两个元素都相等的行高来工作。

HTML:

<div class="row">
  <span class="left">Create new position</span>
  <span class="right"><input type="button" value="Save" />
</div>

CSS:

/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */

.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }

诀窍是将包含 DIV 的 .row 设置为 24px 高，同时设置包含的 SPAN 元素的 line-height 为 24px。通过这样做，您可以告诉浏览器该行文本占用多少垂直空间。

但是请注意，24px 不是重要的部分 - 重要的部分是确定您的 button 有多高，这取决于您的 CSS 和您选择的字体对于按钮本身。

在这种情况下，我给你的例子垂直居中的原因是基于我放在顶部的 EXAMPLE ONLY CSS - 它说字体大小应该是 12px。默认的浏览器大小(至少在 Chrome 中)将在按钮周围提供一些额外的边距和填充，以及一个边框 - 这导致总高度大约为 24px，这外观:

边框也是由示例 CSS 创建的，只是为了向您展示垂直对齐是正确的。一旦你删除 .row { border: 1px solid #ccc; }，它将消失。

这是一个显示它工作的 JSBin:

http://jsbin.com/otekil/1/edit