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

概述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 jsFiddle

截图

HTML

<div >  <div >    <h6 >General information</h6>    <button ><i ></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 >    <div >        <h6>General information</h6>    </div>    <div >        <button ><i ></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

总结

以上是内存溢出为你收集整理的html – 如何在按钮旁边对齐此文本？全部内容，希望文章能够帮你解决html – 如何在按钮旁边对齐此文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。