HTML自舉對準垂直

Question

我想對準的三個按鈕左側的文字在我的下面板標題右側：

這裏是我的代碼：

<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

您可以使用quick floats將元素向左或向右浮動。要使按鈕組的中間線對齊文本行，請使用等於按鈕高度的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屬性值設置元素的必要垂直放置。