Вертикальное выравнивание текста или картинок внутри ячейки flexbox

26.12.2018

При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.

Ниже пример выравнивания текста по вертикали в flexbox

pic1

 


.flexbox-wrapper {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.flexbox-wrapper > div {
  width: 50%;
}

 
<div class="flexbox-wrapper">
	<div>Lorem ipsum dolor sit...</div>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Non quam nostram quidem, inquit Pomponius iocans; Laelius clamores sof?w ille so lebat Edere compellans gumias ex ordine nostros.</div>
</div>


Категории: HTML, CSS
Яндекс.Метрика