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

Question

jsFiddle

截图

HTML

<div class="client-box">
  <div class="box-header clearfix">
    <h6 class="pull-left">General Information</h6>
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button>
  </div>
  <p>box content</p>
</div>

我该如何垂直居中标题标签<h6>并与“编辑”按钮对齐？

在box-header上使用vertical-align无效。我不想硬编码行高，因为以后可能会更改按钮大小等内容，这样会使样式失效。

- mpen

---

你知道，长期以来CSS中的垂直对齐一直是一个令人困扰的问题。我有很多经验，但至今还没有找到可靠的垂直对齐解决方案。我能建议的最好方法就是调整行高，直到符合你的需求...另外，PS：我知道你说你不想设置行高，我只是说这是我经常要做的事情。 - Kai Qing

在CSS中，可以使用em单位来设置padding或margin，例如padding: 0.5em 0;。 - Mr_Green

就我所看到的，你的<h6>是float:left，而你的<button>是float:right，所以如果没有line-height，它们之间将无法“对齐”，因为它们不知道彼此的布局。如果你真的想要垂直居中它们，那就去掉pull-*类，并想另一种方法将它们放在两侧：http://jsfiddle.net/TpqD8/5/ - Passerby

Answer 1

你可以使用CSS的display: table，display: table-cell和vertical-align: middle属性来实现垂直居中。 HTML

<div class="box-header clearfix">
    <div class="left-cell">
        <h6>General Information</h6>
    </div>
    <div class="right-cell">
        <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button>
    </div>
</div>

CSS

.box-header {
    border-bottom: 1px solid #aac7ef;
    padding-bottom: 5px;
    display: table;
    width: 100%;
}
.left-cell {
    display: table-cell;
    vertical-align: middle;
}
.right-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Demo

- 3dgoo

---

需要在 .right-cell 上使用 text-align: right 以保持按钮右对齐，但除此之外，这似乎完美地工作。 - mpen

Answer 2

vertical-align 只适用于两种类型的对象：1、表格单元格和2、行内元素。

它对其他任何类型的HTML元素都没有影响。

并不是说它是“零散的”或“有问题”，只是它不能做到大多数人想要的效果。

理想情况下，最好避免完全垂直对齐文本，但有时我们需要这样做。有各种方法可以实现，至于选择哪种方法，则通常取决于您所处理的特定情况。

在这种情况下，如果您可以依赖它成为一行文本，那么我认为您最好选择通过一些额外的上部填充或position-relative来进行视觉调整，并将其向下移动几个像素。

- DA.

Answer 3

如果您不想硬编码，可以尝试动态设置。

$(function () {
  $('h6.pull-left').css('line-height', $('button.btn.pull-right').outerHeight() + 'px');
});

我创建了一个jsfiddle。

- twksos

Answer 4

您正在使用 pull-right 和 pull-left，这会将元素向左和向右浮动，因此在这种情况下垂直对齐将无法工作。最好的方法是调整填充，或者像其他人建议的那样，在您的 h6 元素上设置 line-height 为类似于 24px 的值。是的，vertical-align:middle 最多只能做到勉强凑合，对于那些追求像素完美的人来说永远不令人满意。

- keeg

Answer 5

是的，垂直对齐在CSS中一直是个问题。所以我建议你设置盒子标题的margin-top... 像margin-top:1px.. 调整盒子标题与margin top的关系将解决这个问题。 此外，您可以使用Firefox中的Firebug检查需要设置多少像素的margin-top。

- Raman Kumar