Bootstrap CSS Align Text Middle Div

Question

我有一个包含三列的引导行。 在中间的列中，有一个输入字段，它在增加行的高度并使第一个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：

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

Answer 2

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

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