вертикально выровнять текст на основе изображения с помощью бутстрапа

Question

У меня есть изображение и вы хотите, чтобы текст рядом с ним был по центру по вертикали. Я могу использовать текстовый центр, если его горизонтальное выравнивание, но мне нужно выровнять по вертикали. Как я могу это сделать? Есть ли способ в бутстрапе сделать это?

<div class="col-md-12 well"> 
     <div class="col-md-3"> 
     <img src="http://placehold.it/100x100"></img> 

     </div> 
     <div class="col-md-3"> 
     <div> 
     This text should be centered vertically 
     </div> 
     </div> 
    </div> 

Вот codepen

Answer 1

Как об использовании flexbox:

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12 well"> 
 
    <div class="col-md-3"> 
 
    <img src="http://placehold.it/100x100"></img> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <div> 
 
     This text should be centered vertically 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы должны изменить класс CSS с "COL-MD-3" до "Col-мкр-9". Тогда вы получите его центр, потому что вы используете в качестве большой контейнер "Col-мкр-12"

И добавить

"text-align: center"