6

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。我不想硬编码行高，因为我可能会在以后更改按钮大小或其他内容，然后它会中断。

4

5 回答 5

8

您可以使用 cssdisplay: table和display: table-celland 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;
}

演示

于 2013-01-16T04:31:24.847 回答
3

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

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

这并不是说它“参差不齐”或“有问题”，只是它没有做大多数人希望它做的事情。

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

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

于 2013-01-16T04:32:44.067 回答
2

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

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

我创建了一个jsfiddle

于 2013-01-16T04:01:12.617 回答
1

您正在使用pull-right，pull-left它使元素左右浮动，因此在这种情况下垂直对齐将不起作用。你能做的最好的就是使用填充，或者像其他人建议的那样将line-height你的h6元素设置为 24px 之类的东西。是vertical-align:middle的，充其量只是参差不齐，永远不会满足那些追求像素完美的人

于 2013-01-16T04:04:27.383 回答
0

是的..垂直对齐一直是css中的一个问题。所以我建议你设置 box-header 的 margin-top ... 比如 margin-top:1px .. 调整 box header wrt margin top 将解决问题。您还可以使用 Firefox 中的 Firebug 检查您需要设置多少像素来设置边距顶部。

于 2013-01-16T04:00:40.307 回答