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

发布时间：2020-12-14 18:49:42 所属栏目：资源来源：网络整理

导读：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 pbox content/p/div 如何获得标题 h6相对于编

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;
}

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!