CSS：与标签相比，按钮向下移动了一点

Question

使用 github link

HTML代码

<div class="col-md-12">
  <div class="col-md-2">
    Processing
  </div>
  <div class="col-md-4">
    <button class="btn btn-primary">Hello</button>
  </div>
</div>

.btn { 
   position: relative; 
   padding: 8px 30px; 
   border: 0; 
   margin: 10px 1px; cursor: pointer; 
   border-radius: 2px; 
   text-transform: uppercase; 
   text-decoration: none; 
   color: rgba(255, 255, 255, 0.84); 
   transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); outline: none !important; }

与标签相比，您可以清楚地注意到该按钮正在下降。

任何CSS修复？暂时可能是??

Answer 1

middle vertical-align和display inline-block应解决此问题。

Booply

<div class="col-md-12">
  <div class="col-md-2 vcenter">
    Processing
  </div>
  <div class="col-md-4 vcenter">
    <button class="btn btn-primary">Hello</button>
  </div>
</div>

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}