html - 在 Bootstrap 网格内垂直居中 div

Question

我会将一个 div 垂直居中放置在另一个 div 中。

我已经尝试使用网站中某些答案中提到的表格单元格，但这不起作用我总是将 div 放在顶部

CSS

.height1 {
  height:60px;
  line-height:60px
}
.row {
  border: 1px solid black;

}
.indicator {
  width :20px;
  height:20px;
  background-color: black;
  vertical-align: middle
}
.badge {
  display:inline-block;
}
.parent {
  display: table-cell;
}

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-8 height1"> TEXTE</div>
        <div class="col-md-4 parent">
          <div class="badge indicator">testing</div>
      </div>
    </div>
</div>

这是一个 demo

Answer 1

请参阅下面更新的代码段。

.height1, .parent {
  line-height:60px
}
.row {
  border: 1px solid black;

}
.indicator {
  height:20px;
  background-color: black;
  vertical-align: middle
}
.badge {
  display:inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-md-8 height1"> TEXTE</div>
        <div class="col-xs-4 col-md-4 parent">
          <div class="badge indicator">testing</div>
      </div>
    </div>
</div>