引導程序中的錨和輸入組的垂直對齊

Question

我正在嘗試排列以下組件，以便它們的中間位置居中。我不知道哪個CSS屬性導致按鈕更低。

<div class="buttons"> 
    <a href="/create" class="btn btn-sm btn-default"><span class="fa fa-codepen"></span>New</a> 
    <a href="/upload" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-floppy-open"></span>Upload</a> 
    <a href="/download" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-floppy-save"></span>Download</a> 
    <div style="display: inline-block;"> 
     <div class="input-group" style="width:20em"> 
      <input style="" class="form-control focus" id="Search" name="Search" type="search"> 
      <span class="input-group-btn"> 
       <button class="btn default btn-primary" type="button" ng-click="rc.search()">Search</button> 
      </span> 
     </div> 
    </div> 
</div> 

這裏是bootply。

Answer 1

http://www.bootply.com/MG2xUvxvR9#

輸入組需要被一個form-group標籤內纏繞。然後我用form-inline把整個東西包裹起來。