Вертикальное выравнивание изображения в столбце

Question

Я использую bootstrap, и я не могу найти решение для вертикального центрирования изображения внутри div. Я огляделся и нашел несколько разных решений, но никто на самом деле не работает для меня.

Here's an image of the problem

мне нужно получить, что изображение по вертикали по центру так, что в соответствии с текстом. Вот отредактированная версия того, что мне нужно, чтобы выглядеть.

Image

мне нужно, чтобы реагировать с текстом, так что я не могу просто добавить запас есть.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

Спасибо, Daniel.

Answer 1

Лучшие до сих пор я нашел это:

howtocenterincss.com

Он расскажет вам, как к центру что-либо в какой-либо другой вещи, либо вертикально, либо горизонтально. Просто позаботьтесь о том, чтобы не испортить остальную часть макета.

Так что для вашего конкретного случая использования:

Мы не знаем высоту текста, ни размер изображения, это встроенный блок элемент.

Ответ: <div style="display:flex;align-items:center;">Text Content</div>

Так мы применяем:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container"> 
 
    <div class="col-md-6" style="display:flex;align-items:center;"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

• Вы можете переопределить самозагрузки с классом и использовать гибкий.

• or look for the flex version of bootstrap и использовать встроенные классы

добавить класс и CSS

.flex { 
 
    display:flex; 
 
    flex-flow:wrap; 
 
    align-items:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container flex"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>

ссылка для начальной загрузки, гибкий вариант, и классы использования: d-flex flex-wrap align-items-cent

img { 
 
    max-width:100%; 
 
}

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="row row-padding" id="bg-white"> 
 
    <div class="container d-flex flex-wrap align-items-center"> 
 
    <div class="col-md-6"> 
 
     <img src="http://lorempixel.com/1920/1080/" class="img-responsive img-rounded"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <h4>Fugiat senserit litteris, hic consequat graviterque. Quo te elit cupidatat e ut 
 
           minim occaecat adipisicing ex officia ea ullamco, fore tractavissent mentitum 
 
           malis aliquip, lorem ut doctrina se incididunt sempiternum ita proident, nescius 
 
           quis an probant cohaerescant, aut aliqua officia iudicem. An sunt admodum, est 
 
           ut eram quae eram. Nulla ubi mandaremus do tamen an arbitror nam velit, 
 
           expetendis ipsum sint ita nulla nam aut varias quid non nostrud. Quorum pariatur 
 
           aut sint tamen aut nescius sint eiusmod. Ex quae nostrud, ea dolore appellat, 
 
           iis illum proident admodum ne est tempor familiaritatem. Hic anim 
 
           instituendarum, an sed multos quae multos.</h4> 
 
    </div> 
 
    </div> 
 
</div>