html - 为什么垂直对齐元素总是那么困难

Question

请检查我的示例。我只想将按钮与输入垂直对齐。我有标签，他们需要留在那里。我只想垂直对齐灰色背景上的按钮。

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
    }
    
    input {
    width: 100%;
    }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-sm-12 tab-topbar">
  <div class="row">
    <div class="col-sm-6">
    <label>asasasfasgasgaaaga</label><br>
    <label>asasasfasgasgaaaga</label><br>
    <input />
    </div>
    <div class="col-sm-6">
      <div class="text-right">
          <button>LOL</button>
      </div>
  </div>
</div>

Answer 1

使用按钮插件

 <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">LOL</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->