Как делается в css вертикальное выравнивание?

Всех приветствую. С горизонтальным выравниваем блоков в css вообще нет никаких проблем. А вот с вертикальным есть. Впрочем, проблемы эти решаются несколькими способами. Итак, сегодня я расскажу, как делать в css вертикальное выравнивание блоков.

Табличный метод

Суть его в чем: родительскому блоку вы задаете display: table, а его вложенному блоку, который нужно отцентрировать — display: table-cell. Таким образом он превращается как бы в ячейку. Ну а ячейки можно выравнивать по вертикали с помощью vertical-align: middle.

С помощью абсолютного позиционирования

Конечно же, с помощью абсолютного позиционирования вы можете практически все, что угодно. Фишка тут такая: задаем блоку-родителю относительное позиционирование, вложенному блоку задаем абсолютное с координатами 50% и 50% (top, left) и делаем отрицательный внешний отступ для элемента, равный высоте элемента разделенной на 2. То есть если высота вложенного блока 150 пикселей, то нужно сделать отрицательный отступ сверху в 75 пикселей. Если вам нужно отцентрировать блок также по горизонтали, то такой же отступ нужно высчитать и задать по горизонтали. Только основываясь не на высоте, а на ширине блока.

<div id = "b1">Блок
<div id = "child">ssss</div>
</div>


#b1 {position: relative;
	background: #999;
	width: 500px;
	height: 300px;
}
#child {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 150px;
	width: 250px;
	margin: -75px 0 0 -125px;
	background: brown;
}

Вот такой результат:
1

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

#b1 {
        position: relative;
	background: #999;
	width: 500px;
	height: 300px;
}
#child {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 150px;
	width: 250px;
	margin: auto;
	background: brown;
}

Вся фишка вот в чем — задаем все координаты (сверху, слева, снизу, справа). Задаем их нулевыми, как вы видите. Когда это сделано, остается прописать margin: auto. Можете проверить, результат идентичен.

Выравнивание текста

Ну а если вас интересует, как делать в css выравнивание по вертикали текста, то читайте эту статью. Там описано 3 рабочих способа, как это сделать.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: