Самозагрузка 3.3.7 столбец изображения по центру - PullRequest
Новая
       7

Самозагрузка 3.3.7 столбец изображения по центру

0 голосов
/ 08 мая 2018

У меня есть базовая разметка, которая выглядит следующим образом: 

<div class="list-content sales">    
    <div class="row row-eq-height"> 
        <div class="col-sm-2 col-xs-12" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2><i class="fa fa-heart-o" aria-hidden="true"></i>
                <p>Sale buyer</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
    </div>
</div>

Моя проблема - первый столбец, где находится img, я не могу добиться какого-либо вертикального выравнивания. Я пытался использовать класс начальной загрузки center-block. Единственный способ заставить его двигаться - это разметка margin-top, но мне нужен правильный способ вертикального выравнивания этого изображения столбца. Вот как это выглядит в итоге. Вы можете видеть его заподлицо с верхней частью столбца, что не соответствует поведению, которое я ищу:

enter image description here

Есть ли встроенный класс, который я могу использовать в Bootstrap 3.3.7 для вертикального выравнивания моего изображения?

1 Ответ

0 голосов
/ 08 мая 2018

Это довольно легко сделать. :) Просто добавьте этот встроенный CSS в img parent div: 

display: flex;
align-items: center;

<div class="col-sm-2 col-xs-12" style="border: 1px solid black; display: flex; align-items: center;">
...