Как выровнять содержимое столбца по центру по вертикали? Бутстрап

0

Привет, мне нужно выровнять содержимое столбца по центру по вертикали. Это образ моей формы

Изображение 174551

И код:

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

Как выровнять последний столбец по центру по вертикали?

  • 0
    это уже есть, так как div не имеет установленной высоты
Теги:
twitter-bootstrap-3

2 ответа

0
Лучший ответ

Добавьте это в div, который хотите выровнять:

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;}
  • 1
    вопрос о вертикальном, а не о горизонтальном
  • 0
    Сожалею! Попробуй :)
1

Вы можете использовать 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>

http://codeply.com/go/Ak9iMhZAuH

  • 1
    решил мою проблему с этим ответом
  • 0
    почему вы приняли другой ответ?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню