连续垂直对齐按钮

我想垂直对齐一行内的按钮（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

连续垂直对齐按钮

回答

相关问题