html bootstrap垂直对齐

Question

我想将左侧的文本与下面面板标题右侧的3个按钮对齐：

这是我的代码：

    <div class="col-lg-9 col-md-9 col-sm-9">
                <h4 class="panel-title">
                <!--<a data-toggle="collapse" data-target="#collapse1">-->
                <h2>Pf <strong>{{pf.pfid}}</strong></h2>
                <!-- </a>-->
                 </h4>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1">
                <button class="btn btn-danger btn-circle-lg" (click)="AddPf()" disabled><span class="glyphicon glyphicon-plus"></span></button>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1">
                <button class="btn btn-warning btn-circle-lg" (click)="showAccForm()"><span class="glyphicon glyphicon-plus"></span></button>
              </div>
              <div class="col-lg-1 col-md-1 col-sm-1" *ngIf="authorization.profileid==1">
                <button class="btn btn-info btn-circle-lg" (click)="showAssForm()"><span class="glyphicon glyphicon-plus"></span></button>
             </div>

任何想法 ？

Answer 1

您可以使用快速浮动向左或向右浮动元素。 要将文本行与按钮组的中间行对齐，请使用与按钮高度相等的line-height值。

 .panel-title { line-height: 36px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title pull-left">Pf <strong>3788</strong></h2> <div class="pull-right"> <button class="btn btn-danger btn-circle-lg" disabled><span class="glyphicon glyphicon-plus"></span></button> <button class="btn btn-warning btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button> <button class="btn btn-info btn-circle-lg"><span class="glyphicon glyphicon-plus"></span></button> </div> <div class="clearfix"></div> </div> <div class="panel-body"> Panel content </div> </div> 

您还可以找到margin-top属性值来设置元素的必要垂直位置。