html - 如何将按钮旁边的文本居中对齐？

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>

如何获取 header <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