Как отцентрировать inline block

Центрирование в CSS: полное руководство

Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.

Давайте построим древовидную схему для принятия решения и будем надеяться, что это всё немного упростит.

Мне нужно отцентрировать элемент…

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Строчные элементы внутри родительского блочного можно центрировать так:

.center-children < text-align: center; > 

Это сработает для элементов с типом отображения inline , inline-block , inline-table , inline-flex и т.д.

Является ли элемент блочным?

Блочный элемент можно центрировать, указав для margin-left и margin-right значение auto (а также прописав для него конкретный width , иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрировании). Для этого часто используют сокращённую запись:

.center-me < margin: 0 auto; > 

Способ работает независимо от ширины центрируемого блочного элемента и его родителя.

Обратите внимание, что заставить элемент плавать по центру с помощью float нельзя. Хотя есть одна хитрость.

Вам нужно центрировать несколько блочных элементов?

Если вы имеете дело с двумя и больше блочными элементами, размещёнными в ряд, которые нужно центрировать по горизонтали, возможно, вам потребуется изменить тип display . Вот что произойдёт, если указать для них тип отображения inline-block или применить flexbox:

В том же случае, если у вас несколько блочных элементов размещены друг над другом, вполне сработает приём с автоматическими отступами:

По вертикали

С вертикальным центрированием в CSS все немного сложнее:

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

Иногда строчные/текстовые элементы могут выглядеть отцентрированными по вертикали только потому, что у них одинаковые верхнее и нижнее поля ( padding ).

.link < padding-top: 30px; padding-bottom: 30px; > 

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

.center-text-trick < height: 100px; line-height: 100px; white-space: nowrap; > 

Элемент занимает несколько строк?

Центрирование нескольких строчек текста также можно сделать с помощью установки одинаковых верхнего и нижнего полей, однако, если этот вариант вам не подходит, можно сделать элемент, в который помещён текст, ячейкой таблицы — буквально или же просто её имитацией на CSS. За центрирование в этом случае отвечает свойство vertical-align , несмотря на то, что обычно он просто выравниванивает по горизонтали элементы в ряду. (Более подробно об этом.)

Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во flex-родителе.

.flex-center-vertically < display: flex; justify-content: center; flex-direction: column; height: 400px; > 

Помните, что этот способ подходит только если у родительского контейнера указана конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.

Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст выравнивается по горизонтали по этому элементу:

.ghost-center < position: relative; > .ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; > .ghost-center p < display: inline-block; vertical-align: middle; > 

Это блочный элемент?

Вам известна высота элемента?

Обычно, когда речь идёт о веб-странице, высота может быть неизвестна по многим причинам: если изменяется ширина элемента, перераспределение текста может изменить высоту. Вариации в стилизации текста могут изменить высоту. Изменение количества текста может изменить высоту элемента. Элементы с фиксированным соотношением сторон, например, изображения, могут изменить высоту при масштабировании — и так далее.

Но, если вам известна высота, вертикальное центрирование можно сделать так:

.parent < position: relative; > .child < position: absolute; top: 50%; height: 100px; margin-top: -50px; /* учитывайте поля и границы, если не используете box-sizing: border-box; */ > 

Вам неизвестна высота элемента?

Его все-таки можно центрировать, подняв вверх на половину его высоты после того, как сдвинули его наполовину вниз:

.parent < position: relative; > .child < position: absolute; top: 50%; transform: translateY(-50%); > 

Вы можете использовать flexbox?

Не удивительно, что всё это можно сделать значительно проще с помощью flexbox.

.parent < display: flex; flex-direction: column; justify-content: center; > 

И по горизонтали, и по вертикали

Описанные выше приёмы можно комбинировать как угодно, чтобы получить идеально отцентрированные элементы. Но, по моему опыту, обычно всё сводится к трём вариантам:

У элемента фиксированная высота и ширина?

Использование отступов с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, отцентрирует элемент внутри родителя. Кроме того, способ хорошо поддерживается браузерами:

.parent < position: relative; > .child < width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; > 

Высота и ширина элемента неизвестны?

Если вам не известны ширина или высота, для центрирования можно использовать свойство transform и отрицательное значение translate по 50% в обоих направлениях (оно вычисляется от текущей ширины/высоты элемента):

.parent < position: relative; > .child < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > 

Вы можете использовать flexbox?

Чтобы выполнить центрирование в обоих направлениях с помощью flexbox, нужно использовать два центрирующих свойства:

.parent < display: flex; justify-content: center; align-items: center; > 

Заключение

С помощью CSS вы можете отцентрировать всё что угодно.

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

В 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 находится пробел, который занимает место.

Убрать лишний пробел между div и началом inner , будет .
Оставить пробел, но сделать отрицательный 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 .
Высота обоих элементов неизвестна.







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


Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
Решение с использованием flexbox.

Как выровнять блок по центру - полное руководство по центрированию DIV-элемента
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе .
Обновлено: 2021-01-24 16:45:19 Валентин Сейидов автор материала
Простое центрирование DIV-элемента на странице
Этот метод будет отлично работать во всех браузерах.
.center-div
Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .
Центрируем DIV внутри DIV-элемента старым способом
Этот метод div выравнивания по центру будет работать во всех браузерах.






.outer-div < padding: 30px; >.inner-div
Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).
Центрируем DIV внутри DIV-элемента с помощью inline-block
В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .
.outer-div < padding: 30px; text-align: center; >.inner-div
Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .
Центрируем DIV внутри DIV-элемента горизонтально и вертикально
Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.






.outer-div < padding: 30px; >.inner-div
У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.
Центрируем DIV по нижней границе страницы
Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
.outer-div < position: absolute; bottom: 30px; width: 100%; >.inner-div
У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .
Центрируем DIV на странице вертикально и горизонтально
Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.






.center-div
У div-элемента должна быть установлена ширина ( width ) и высота ( height ).
Делаем адаптивное центрирование DIV-элемента на странице
Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.
.center-div
У центрированного div-элемента должно быть установлено свойство max-width .
Центрируем DIV внутри элемента с помощью свойств внутреннего блока
Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.
.outer-div < padding: 30px; >.inner-div
У внутреннего div должно быть установлено свойство max-width .
Центрируем два адаптивных div-элемента рядом друг с другом
Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.
.container < text-align: center; >.left-div < display: inline-block; max-width: 300px; vertical-align: top; >.right-div < display: inline-block; max-width: 150px; >screen and (max-width: 600px) < .left-div, .right-div < lef max-width: 100%; >>
Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.
DIV-элемент, центрированный при помощи Flexbox
Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .
.container < display: flex; align-items: center; justify-content: center; height: 100vh; >.item
Значение свойства height может быть любым, но только больше размера центрированного div-элемента.
Валентин Сейидов автор-переводчик статьи « THE COMPLETE GUIDE TO CENTERING A DIV »
Как выровнять элементы inline-block по верхней границе контейнера
Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.
1. Создайте HTML

Создайте с классом "container".
Создайте два других span внутри "container". Первый div имеет название "small-box", а второй называется "big-box".

div span >span> span >span> div>
2. Создайте CSS

Задайте height и width для классов.
Добавьте color, width и style к border.
Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.

.container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; >
Пример
html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>
Нашей проблемой является выравнивание .small-box по верхней границе контейнера.
Ключевое слово "top" свойства vertical-align поможет нам в этом вопросе.
Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение "top" выравнивает верхний край элемента с верхней линией блока.
Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:
.small-box< vertical-align: top; >
Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.
Пример
html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; vertical-align:top; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>
Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов .
Пример, где произошла ошибка:
Пример
html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; > ul li< display:inline; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>
Нам просто необходимо заменить свойство display на свойство float со значением "left". Мы используем свойство float , которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в "both". Это означает, что плавающие элементы запрещены с правой и левой стороны.
Пример
html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; clear:both; content:""; display: table; > ul li< float:left; list-style-type:none; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>
В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово "flex" свойства display, которое используется с расширением -Webkit-.
Пример
html> html> head> title>Заголовок документа title> style> div< color:#ffffff; display:flex; display: -webkit-flex; align-items:flex-start; -webkit-align-items:flex-start; > #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; padding:10px; > style> head> body> div> span id="box-one" class="normal">Blue span> strong id="box-two" class="normal">Green strong> span id="box-three" class="normal">Grey span> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> div> body> html>


Похожие публикации:

Как обрезать часть экрана монитора
Как сохранить изменения в html коде сайта
Как стримить через geforce experience
Как убрать группировку писем в thunderbird