連續垂直對齊按鈕

我想垂直對齊一行內的按鈕（bootstrap）。我無法解決它...任何提示？連續垂直對齊按鈕

<div class="form-group row"> 
    <div class="col-sm-6"> 
     <input class="form-control" name="new-project" value="" placeholder="Type project name"></input> 
    </div> 
    <div class="col-sm-2"> 
     <button type="button" class="btn btn-sm" style="position: absolute; vertical-align: middle">Save</button> 
    </div> 
</div>

來源

2016-01-09 Craig

使用'塊：直列block'作爲垂直對齊僅應用於內聯或表元素。見：https：//developer.mozilla.org/en/docs/Web/CSS/vertical-align –

@IgnacyDebicki你的意思是顯示：內聯塊？ –

啊，是的，遺憾的是我的頭頂部打字。好點子 –

由於您使用的是小按鈕，您還應該使用小輸入。使用input-group也是一種選擇。

查看全頁面的示例代碼片段。

body { 
 
    padding-top: 50px; 
 
} 
 
.red { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-6 col-sm-offset-2 red"> 
 
     <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" /> 
 
     </div> 
 
     <div class="col-sm-2 red"> 
 
     <button type="button" class="btn btn-sm">Save</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="form-group"> 
 
     <div class="col-sm-8 col-sm-offset-2 red"> 
 
     <div class="input-group"> 
 
      <input class="form-control input-sm" name="new-project" value="" placeholder="Type project name" /> 
 
      <span class="input-group-btn"> 
 
     <button type="button" class="btn btn-sm">Save</button> 
 
     </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-01-09 19:28:31 vanburen

連續垂直對齊按鈕

回答

相關問題