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上不起作用.我不想对行高进行硬编码,因为我可能会更改按钮大小或稍后的某些内容,然后它会中断.
解决方法
您可以使用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; }
