Верстальщик html страницmariia.belogubova@gmail.com

Css выравнивание блоков

CSS Выравнивание

Как выровнять блок по центру, по горизонтали или вертикали?

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

Для начало нам надо понять свойство display и как оно влияет на выравнивание.

display: inline;

Основная особенность стрчного элемента заключается в том, что ширина и высота определяется по содержимому и менять размеры строчного элемента не получиться. Это значит, что свойства width и height не будут срабатывать.

К втроенным строчным элементам относятся теги <span>, <a>, <code>, <strong> ...

Строчные элементы можно отцентрировать с помощью свойства text-align: center;

На примере ниже показано, как текст выравнивается по центру блока.

Строчный элемент по центру
HTML:
<div class='wrapper'>
<span>Стройчный элемент по центру</span>*
</div>
CSS:
.wrapper {
text-align: center;
}

* тег <span> можно опустить, так как символы (текст) ведут себя как строчные элементы.

display: block / list-item /table;

Основная особенность блочного элемента заключается в том, что блок растягивается на всю доступную ширину. И ширину с высотой можно изменять. Свойства width и height сработают.

Самый простой способ отцентрировать блочный элемент - прописать ему свойство margin: 0 auto. Используя margin важно обратить внимание на ширину блока, если блок растянут по всей ширине родителя, то центрирование визуально не сработает. Для того, чтобы блок встал по центру надо убедиться, что его ширина меньше ширины родителя (тега в который он вложен). Если вы попробуете отцентрировать блочный элемент с помощью text-align: center , то только строчные элементы будут располагаться по центру (например, текст в блоке), но сам блок не изменит своего расположения.

К встроенным блочным элементам относятся теги <div>, <p>, <article>, <section>...

Пример ниже показывает один из способов выравнивания по центру блочных конструкций.

Блочный элемент по центру

HTML:
<div>
<p class='block-center'>Блочный элемент по центру</p>
</div>
CSS:
.block-center {
width:70%;
margin:0 auto;
}

Чаще всего задача предстоит наиболее сложного характера - когда надо выровнять несколько элементов в блоке. Тогда стоит обратить внимание на флексы и гриды. display: flex / grid (для выравнивания блоков они взаимозаменяемы).

Выравнивание по левому краю

Выравнивание по центру

Выравнивание по правому краю

.wrapper { 
display:flex;
justify-content: flex-start;
align-items: flex-start;
}
.wrapper { 
display:flex;
justify-content: center;
align-items: flex-start;
}
.wrapper { 
display:flex;
justify-content: flex-end;
align-items: flex-start;
}
Смотреть больше примеров
.wrapper { 
display:flex;
justify-content: flex-start;
align-items: center;
}
.wrapper { 
display:flex;
justify-content: center;
align-items: center;
}
Смотреть больше примеров
.wrapper { 
display:flex;
justify-content: flex-end;
align-items: center;
}
.wrapper { 
display:flex;
justify-content: flex-start;
align-items: flex-end;
}
.wrapper { 
display:flex;
justify-content: center;
align-items: flex-end;
}
.wrapper { 
display:flex;
justify-content: flex-end;
align-items: flex-end;
}

Блок по центру

Центрируем

Блок по центру
HTML: 
<div class='wrapper'>
<p class='block-center'>Блочный элемент по центру</p>
</div>

Пример №1:

.wrapper { 
display:flex;
justify-content: center;
align-items: center;
}

Пример №2:

.wrapper { 
display:grid;
justify-content: center;
align-items: center;
}

Пример №3:

.block-center { 
display:inline-block;
position: relative;
top:50%;
left:50%
transform: translate(-50%, -50%);
}

Пример №4:

.wrapper { 
display:grid;
}
.block-center {
margin: auto;
}

Блок по правому краю

Позиционируем блок справа

Блок справа
HTML: 
<div class='wrapper'>
<p class='block-right'>Блок расположен справа</p>
</div>

Пример №1:

.wrapper { 
display:flex;
justify-content: flex-end;
}

Пример №2:

.wrapper { 
display:grid;
justify-content: end;
}

Пример №3:

.block-right { 
display:inline-block;
position: relative;
left:100%
transform: translateX(-100%);
}

Пример №4:

.wrapper { 
display:grid;
}
.block-right {
margin-left: auto;
}

Надеюсь, что данные примеры помогут вам в решении ваших задач.

Если появились вопросы по данной теме присылайте их на почту с заголовком "CSS выравнивание блоков". Почта указана в контактах или нажмите на кнопку "ЗАДАТЬ ВОПРОС".

Контакт

mariia.belogubova@gmail.com

Информация, которую стоит указать в письме:

  • Имя, роль, контакты
  • Краткое описание проекта или список проблем.
  • Срок сдачи проекта
  • Бюджет проекта
  • Как вы обо мне узнали?

По любым вопросам пишите на почту

Написать письмо