Как выровнять блоки по горизонтали в css
Перейти к содержимому

Как выровнять блоки по горизонтали в css

  • автор:

Выравнивание блоков равномерно по горизонтали

Есть три блока на сайте одинаковой высоты, расположенные в одну строку. Левый (1) привязан к левой стороне браузера, а средний (2) и правый (3) к правой стороне браузера. дано
(источник: joxi.ru) Задача: нужно, чтобы средний блок (2) всегда был посередине, относительно других блоков, чтобы расстояние между 1-2 и 2-3 были одинковыми. Как это реализовать? Вот пример того, что мне нужно. Теперь расстояния А и Б одинаковы всегда при изменении окна браузера: требуется
(источник: joxi.ru)

Отслеживать

1,183 2 2 золотых знака 14 14 серебряных знаков 19 19 бронзовых знаков

Горизонтальное и вертикальное выравнивание

Центрирование элементов
по горизонтали и вертикали

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

Чтобы горизонтально выровнять по центру блоковый элемент (например, ), можно использовать свойство margin: auto; .

Определение ширины элемента предотвратит его вытягивание до границ контейнера.

При таких установках элемент займет заданную ширину, а оставшееся пространство будет поровну поделено между двумя отступами:

Это элемент div расположен по центру.

 .center

Внимание! Выравнивание по центру не будет работать, если свойство width не установлено (или установлено в 100%).

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

Чтобы внутри элемента выровнять только текст, используется свойство text-align: center; .

Этот текст выровнен по центру.

 .center

Выравнивание изображения по центру

Чтобы выровнять изображение по центру, нужно сделать элемент блоковым и установить левый и правый отступы в значение auto :

Париж

Выравнивание по левому/правому краю — Используем свойство position

Один из способов выровнять элемент по левому или правому краю, это использовать свойство position: absolute; :

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

 .right

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

Выравнивание по левому/правому краю — Используем свойство float

Другой способ выровнять элемент по левому или правому краю, это использовать свойство float :

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

 .right

Прием clearfix

Если высота плавающего элемента (с заданным свойством float ) больше, чем высота его контейнера, то он будет «переполнять» его и выходить за его пределы. Чтобы это исправить, можно воспользоваться специальным приемом clearfix.

Без clearfix

С clearfix

Мы можем добавить к элементу контейнеру специальный код, который решит эту проблему:

 .clearfix::after

Центрирование по вертикали — Используем свойство padding

В CSS существует множество способов центрирования элемента по вертикали. Самое простое решение, это использовать свойства padding-top и padding-bottom :

Я центрирован по вертикали.

 .center

Чтобы центрировать и по вертикали и по горизонтали, используются свойства padding и text-align: center :

Я центрирован вертикально и горизонтально.

 .center

Центрирование по вертикали — Используем свойство line-height

Еще один способ центрировать элемент вертикально, это использовать свойство line-height со значением, равным значению свойства height :

Я центрирован вертикально и горизонтально.

 .center < line-height: 200px; height: 200px; border: 3px solid green; text-align: center; >/* Если в тексте несколько строк, добавьте такой код: */ .center p

Центрирование по вертикали — Используем свойства position и transform

Если свойства padding и line-height использовать не хочется, то есть другое решение — использовать позиционирование и свойство transform :

Я центрирован вертикально и горизонтально.

 .center < height: 200px; position: relative; border: 3px solid green; >.center p

Центрирование по вертикали — Используем Flexbox

Также, чтобы элемент разместить по центру, можно использовать flexbox. Следует только помнить, что flexbox не поддерживается в браузерах IE10 и более ранних версий:

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

 .outer 

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

 .outer < text-align: center; border: 1px solid blue; >.inner 

margin: auto

Блок по горизонтали центрируется margin: auto :

 .outer < border: 1px solid blue; >.inner 

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 

Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Почему -0.625em ?

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

 .outer 
Текст

Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

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

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

 table < border-collapse: collapse; >td 
top middle bottom

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

 

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

 

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

 

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

  

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

 .before < display: inline-block; height: 100%; vertical-align: middle; >.inner 
Центрированный
Элемент
  • Перед центрируемым элементом помещается вспомогательный инлайн-блок before , занимающий всю возможную высоту.
  • Центрируемый блок выровнен по его середине.

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; >/* добавим горизонтальное центрирование */ .outer 
Центрированный
Элемент

В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

  1. Убрать лишний пробел между div и началом inner , будет .
  2. Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.
 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; margin-left: -0.35em; >.outer 
Центрированный
Элемент

Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

  
Центрированный
Элемент
  • Не требуется знания высоты центрируемого элемента.
  • CSS чистый, короткий и не требует дополнительных элементов.
  • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

5 способов горизонтального выравнивание блоков по центру

5 способов горизонтального выравнивание блоков по центру

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

// CSS код родительского блока
.wrap max-width: 400px;
margin: 50px auto;
border: 3px solid black;
min-height: 100px;
>

// CSS код дочернего блока
.block width: 100px;
height: 100px;
margin: 5px;
background: blueviolet;
>

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

5 способов горизонтального выравнивание блоков по центру.

Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.

1) Свойство text-align (используется, но реже)

Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.

.center text-align: center;
>

.block .
display: inline-block;
>

5 способов горизонтального выравнивание блоков по центру.

2) Свойство margin: auto (актуальное)

Данное свойство мы прописываем дочернему блоку. В сокращенной записи верхнему и нижнему отступу мы можем оставить нулевое значение или указать нужные размеры согласно макету для верстки. Но нас интересует значение auto, как раз оно и задает автоматический отступ с левой и с правой стороны от вложенного блока. Это значит, что пространство с обеих сторон должно рассчитываться поровну. Этот способ выравнивания и по сей день является самым популярным у верстальщиков при горизонтальном выравнивании.

3) Свойство position: absolute (устаревшее)

Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.

.relative position: relative;
>

.absolute position: absolute;
left: 50%;
transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
>

4) Свойство flexbox (популярное)

Flexbox - самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.

5) Свойство grid (современное)

Еще один современный способ выравнивания - это grid. Добавляем родителю всего два grid свойства, а вложенному блоку - три grid свойства.

.grid-parent display: grid;
grid-template-areas: "a";
>

.grid-child grid-area: a;
justify-self: center;
>

Создано 04.11.2020 10:53:02

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 1 ):

    romas_s 04.11.2020 18:14:39

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

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *