Bootstrap CSS Align Text Middle Div

Question

我有一个包含三列的bootstrap行。在中间的列中，有一个输入字段，它增加了行的高度，并将第一个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中的标签/内容在中间对齐？

Answer 1

您可以使用translateY：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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