Привет, мне нужно выровнять содержимое столбца по центру по вертикали. Это образ моей формы
И код:
<div class="row">
<div class="form-group col-lg-2">
<label translate="global.field.name" for="name">Name</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col-lg-2">
<label translate="global.field.code" for="code">Code</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col-lg-2">
<label translate="global.field.translation" for="translation">Translation</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col" >
<button><span class="glyphicon glyphicon-remove"></span></button>
<button><span class="glyphicon glyphicon-search"></span></button>
</div>
Как выровнять последний столбец по центру по вертикали?
Добавьте это в div, который хотите выровнять:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;}
Вы можете использовать flexbox вот так..
.vcenter {
display: flex;
align-items: center;
}
<div class="row vcenter">
<div class="form-group col-lg-2">
<label translate="global.field.name" for="name">Name</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col-lg-2">
<label translate="global.field.code" for="code">Code</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col-lg-2">
<label translate="global.field.translation" for="translation">Translation</label>
<input type="text" class="form-control" />
</div>
<div class="form-group col-lg-1" >
<button class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
<button class="btn btn-default"><span class=" glyphicon glyphicon-search"></span></button>
</div>
</div>