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

小提琴：

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

Answer 2

解决方案编号：1

.panel-heading .pull-left p {
    margin-bottom: 0;
}

解决方案编号：2

您的HTML将是这样的

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <p>Lorem ipsum</p>
        <div class="circle-icon">
            <span class="glyphicon glyphicon-list-alt"></span>
          <span class="glyphicon glyphicon-option-vertical circle-icon-glyphicon"></span>
        </div>
     </div>
    <div class="panel-body">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </div>
  </div>

你的CSS将是这样的

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-heading.clearfix:before,.panel-heading.clearfix:after {
  content: none;
}
.panel-heading p {
    margin-bottom: 0;
}
.circle-icon {
    display: flex;
    align-items: center;
}
.circle-icon-glyphicon {
    padding: 5px;
    border-radius: 50%;
    vertical-align: middle;
    display: table-cell;
    background-color: #bbb;
    margin-left: 10px; // Added
}

使用解决方案2 here

更新了您的小提琴

Answer 3

删除margin-bottom表单p http://jsfiddle.net/bbn5vfwt/1/

p.heading-text {
  margin-bottom: 0;
}

此.heading-text类提供给p

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

3 个答案: