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

26.12.2018 16:56:16

При использовании 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
Яндекс.Метрика