html - 面板标题中按钮和文本的垂直对齐

Question

我正在尝试将按钮与以下面板中的标题文本垂直对齐 - 如何将文本与按钮垂直对齐？

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading clearfix">
      <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 class="clearfix"></div>
    </div>
    <div class="panel-body">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </div>
  </div>
</div>

CSS:

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

fiddle :

http://jsfiddle.net/bbn5vfwt/

Answer 1

Bootstrap 为段落应用 10px 底部边距。这就是使用图像时未对齐的原因。为您的标题段落应用 margin-bottom:0px，如下所示。

<div class="pull-left">
    <p style="margin-bottom:0px">Lorem ipsum</p>
</div>

DEMO