2016-02-12 3 views
0

Я пробовал дюжину способов центрировать выравнивание столбца по вертикали в бутстрапе, но никто не работал. Моя проблема: я не знаю, тогда высота столбца. Могу ли я использовать flexbox? Он встроен в Bootstrap 3? items are not vertically centeredВертикальный центр выровнять столбец в бутстрапе

мой код:

<div class="row"> 

         <div class="col-sm-12"> 

          <div class="col-md-2" style="padding: 0px"> 
                    <img alt="img" src="image/avatar/unknown.png" class="img-responsive forum-avatar"> 


          </div> 
          <div class="col-md-6"> 
           <span class="qap-q-author">user1</span><br> 
           <span class="qap-q-h">test</span> 
          </div> 

          <div class="col-md-2"> 
           <span class="text-muted pull-right qap-a-cnt"><span>&nbsp;&nbsp;</span><span class="badge">1</span></span> 
           <span class="qap-q-h pull-right">1</span> 
          </div> 
          <div class="col-md-2"> 
           <i class="fa fa-group" style="font-size: 32px"></i> 
          </div> 
         </div> 
        </div> 
+0

Пожалуйста, ваши примеры кода здесь. – ketan

ответ

10

Flexbox можно использовать, но тогда вам придется позаботиться о старых браузерах. Здесь точно объясняется выравнивание столбца в бутстрапе. Посмотрите center align column in bootstrap

Вы можете центрировать выравнивание столбцов с помощью flexbox.

вы можете добавить этот класс к родительскому контейнеру вашего DIV, который вы хотите Выровнять по центру:

.v-center { 
    display: flex; 
    align-items: center; 
} 

Подробнее о вертикальном выравнивании столбцов здесь: vertical align columns

+0

Ссылка, о которой вы упомянули, предназначена только для горизонтального центрирования! – AVEbrahimi

+0

Я также обновил свой ответ для вертикального выравнивания. –

+0

Thx это работа потрясающая и простая! – Atterratio

Смежные вопросы