面板标题中按钮与文本的垂直对齐问题

我来帮你搞定这个垂直对齐的问题～你的核心问题在于两个点：一是<p>标签自带的上下外边距会让文本位置偏移，二是原来的浮动布局没有设置垂直对齐的规则。下面给你两种可行的解决方案：

方案1：使用Flexbox（推荐，现代浏览器友好） #

Flexbox是最简单直接的方法，只需要给面板标题容器设置Flex布局，就能轻松让内部元素垂直居中：

修改后的CSS #

/* 给面板标题设置Flex布局，实现左右分布+垂直居中 */
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 移除p标签默认的上下边距，避免文本偏移 */
.pull-left p {
  margin: 0;
}

/* 保留你原来的圆形图标样式 */
.circle-icon {
  display: inline-table;
  text-align: center;
}
.circle-icon-glyphicon {
  padding: 5px;
  border-radius: 50%;
  vertical-align: middle;
  display: table-cell;
  background-color: #bbb;
}

对应的HTML（可简化多余的clearfix） #

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="pull-left">
        <p>Lorem ipsum</p>
      </div>
      <div class="pull-right">
        <span class="glyphicon glyphicon-list-alt"></span>
        <div class="circle-icon">
          <span class="glyphicon glyphicon-option-vertical circle-icon-glyphicon"></span>
        </div>
      </div>
    </div>
    <div class="panel-body">
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
    </div>
  </div>
</div>

方案2：兼容旧浏览器的inline-block+vertical-align方法 #

如果需要支持更老的浏览器，可以用传统的行内块元素对齐方式：

修改后的CSS #

/* 移除p标签默认的上下边距 */
.pull-left p {
  margin: 0;
}

/* 将左右容器设置为inline-block，并设置垂直对齐 */
.panel-heading .pull-left,
.panel-heading .pull-right {
  display: inline-block;
  vertical-align: middle;
}

/* 清除浮动，避免容器高度塌陷 */
.panel-heading {
  overflow: hidden;
}

/* 保留原来的圆形图标样式 */
.circle-icon {
  display: inline-table;
  text-align: center;
}
.circle-icon-glyphicon {
  padding: 5px;
  border-radius: 50%;
  vertical-align: middle;
  display: table-cell;
  background-color: #bbb;
}

说明 #

• Flexbox方案的align-items: center会自动让容器内所有元素垂直居中，代码简洁易维护。
• 两种方案都需要移除<p>标签的默认上下边距，这是因为浏览器默认给<p>设置了margin-top和margin-bottom，会导致文本和图标不在同一水平线上。

内容的提问来源于stack exchange，提问作者geejay