Bootstrap CSS 对齐文本中间 div答案

【问题标题】：Bootstrap CSS Align Text Middle DivBootstrap CSS 对齐文本中间 div
【发布时间】：2017-01-15 10:44:36
【问题描述】：

我有一个三列的引导行。在中间列中，有一个输入字段，它增加了行的高度并将我的第一个 div 中的文本对齐到顶部。

我尝试添加一些 css 以使该 div 文本在中间对齐，但它不起作用。

.filterOption{
  display: table-cell;
  vertical-align: middle;
}

我的 html 非常基本，看起来像这样：

if(field.isInput == '1'){
  output += '<div class="row">' +
  '<div class="col-md-2 filterOption">'+field.fieldName+'</div>' +
  '<div class="col-md-9"><input type="text" class="form-control" id="field_'+field.fieldID+'" name="field_'+field.fieldID+'" placeholder="'+field.placeholder+'"></div>' +
  '<div class="col-md-1"><button type="button" class="btn btn-danger btn-sm pull-right"><i class="fa fa-remove"></i></button></div>' +
  '</div>';
}

问题

如何让第一个 div 中的标签/内容居中对齐？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以使用 translateY:

.filterOption{
  position:relative;
  transform: translateY(30%);
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-2 filterOption">'+field.fieldName+'</div>
    <div class="col-md-9"><input type="text" class="form-control" id="field_'+field.fieldID+'"
                                 name="field_'+field.fieldID+'" placeholder="'+field.placeholder+'"></div>
    <div class="col-md-1">
        <button type="button" class="btn btn-danger btn-sm pull-right"><i class="fa fa-remove"></i></button>
    </div>
</div>

【讨论】：

【解决方案2】：

最简单的方法是向此单元格添加顶部和底部填充。

.filterOption{
   padding-top: 5px; //put correct pixel
   padding-bottom: 5px; //put correct pixel
}

【讨论】：