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

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 -->

Answer 2

使用width和display:inline-block将这些元素放在同一行中。

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

<!-- 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>
   
    </div>
    <div class="col-sm-6">
 <input />        
          <button style="width:10%;display:inline-block">LOL</button>
  
  </div>
</div>

Answer 3

你可以使用display:flex解决这个问题，并在input类中移动text-right框。

这是更新的小提琴：

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

input {
  width: 100%;
}

.text-right {
  display: flex;
}

<!-- 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>

    </div>
    <div class="col-sm-6">
      <div class="text-right">
        <input />
        <button>LOL</button>
      </div>
    </div>

Answer 4

.tab-topbar {
    background-color: #e0e0e0;
    padding: 20px;
    margin-top: 5px;
    border: 1px solid #ccc;
    }
input {
Width: 100%;
margin-right: 10px !important;
}
.flexedDiv {
display: flex;
}
    
    

<!-- 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-12">
<label>asasasfasgasgaaaga</label><br>
    <label>asasasfasgasgaaaga</label><br>
</div>
    <div class="col-sm-12 flexedDiv">
    
    <input />
<button>LOL</button>
    </div>
    
  </div>
</div>

使用这种结构并在css中弯曲，这将使您的生活变得轻松

Answer 5

它可以通过使用Flexbox解决，您需要更新您的结构。试试这个我希望它会帮助你。谢谢

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

.formField {
  display: flex;
}

<!-- 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="tab-topbar">
  <label>asasasfasgasgaaaga</label><br>
  <label>asasasfasgasgaaaga</label><br>
  <div class="formField">
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    <button type="submit" class="btn btn-default">Confirm identity</button>
  </div>
</div>