如何在按钮旁边对齐此文本？

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>？

将vertical-align放在box-header上不起作用。我不想对行高进行硬编码，因为我可能会更改按钮大小或稍后的某些内容，然后它会中断。

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

Answer 2

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

它与任何其他类型的HTML元素无关。

并不是说它“不稳定”或“问题”只是因为它没有做到大多数人希望它做的事情。

理想情况下，您可以完全避免垂直对齐文本，但有时我们需要这样做。有多种方法可以做到这一点，至于决定采用哪种方式，通常取决于你所处的特定情况。

在这种情况下，如果您可以依赖它作为一行文本，我认为您最好的选择是使用一些额外的顶部填充进行光学调整，或position-relative并将其放下几个像素。

Answer 3

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

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

我创建了jsfiddle

Answer 4

您正在使用pull-right和pull-left左右浮动元素，因此在这种情况下垂直对齐将无效。你可以做的最好的就是使用填充，或者正如其他人建议你的line-height元素上的h6设置为24px。并且是vertical-align:middle充其量只是参差不齐，并且永远不会满足那些寻求像素完美的人

Answer 5

是的..在css中，垂直对齐一直是个问题。所以我建议你设置框头的边距顶部...... 像margin-top：1px .. 调整框头wrt边距顶部将解决问题。 您还可以使用Firefox中的Firebug查看您需要设置margin-top的像素数。