Как выровнять списки по центру в css

Выравнять элементы списка по ширине

На этой странице под слайдером есть список (точечки — переключатели по слайдам). Он сейчас выровнен по центру, а как сделать, чтобы было по ширине, чтобы точечки располагались на равном расстоянии друг от друга, независимо от того, сколько элементов?

Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 27 окт 2014 в 15:52
113 6 6 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

@unfapable, кроссбраузерное решение есть:

Все это реализуется с помощью text-align: justify; . Поддержка IE начиная с 8-й версии.

Если заменить псевдоэлемент на дополнительный li , то поддержка IE с 7-й версии будет, думаю.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 28 окт 2014 в 4:44
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

display: flex; justify-content: space-between;

Отслеживать
ответ дан 27 окт 2014 в 15:59
Nasty Pacman Nasty Pacman
453 2 2 серебряных знака 7 7 бронзовых знаков
А есть кроссбраузерное решение?
27 окт 2014 в 18:03
Да, конечно. К этому же коду нужно добавить вендорные префиксы.
27 окт 2014 в 21:13
Я имел в виду прежде всего ИЕ. Как с ним?
28 окт 2014 в 4:12

IE? По крайней мере в тех, которые входят в десятку самых популярных браузеров, точно всё хорошо. В тех, доля которых превышает два процента — тоже всё замечательно.

28 окт 2014 в 4:32

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Стилизация списков

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

Требования:	Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.
Цель:	Познакомиться с лучшими практиками и свойствами по стилизации списков.

Пример простого списка

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

h2>Shopping (unordered) listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> ul> li>Hummusli> li>Pitali> li>Green saladli> li>Halloumili> ul> h2>Recipe (ordered) listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> ol> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> h2>Ingredient description listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> dl> dt>Hummusdt> dd> A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients. dd> dt>Pitadt> dd>A soft, slightly leavened flatbread.dd> dt>Halloumidt> dd> A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. dd> dt>Green saladdt> dd>That green healthy stuff that many of us just use to garnish kebabs.dd> dl>

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

Элементы и имеют верхний и нижний margin по 16px ( 1em ) и padding-left 40px ( 2.5em .)
Объекты списка (элементы ) не имеют заданных значений по умолчанию для интервалов.
Элемент имеет верхний и нижний margin по 16px ( 1em ), но padding не задан.
Элементы имеют margin-left 40px ( 2.5em .)
Элементы которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px ( 1em ), точно так же, как и различные типы списков.

Управление интервалами списков

При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)

CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

/* Базовые стили */ html  font-family: Helvetica, Arial, sans-serif; font-size: 10px; > h2  font-size: 2rem; > ul, ol, dl, p  font-size: 1.5rem; > li, p  line-height: 1.5; > /* Задаём стили для списка описаний */ dd, dt  line-height: 1.5; > dt  font-weight: bold; > dd  margin-bottom: 1.5rem; >

Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.

Стили специфичные для списков

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

list-style-type (en-US): задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
list-style-position (en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
list-style-image : позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.

Стили маркеров

Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

ol  list-style-type: upper-roman; >

Это даёт нам следующий вид:

Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

Позиция маркера

Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

Если вы установите значение на inside , то маркеры будут находиться внутри строк:

ol  list-style-type: upper-roman; list-style-position: inside; >

an ordered list with the bullet points set to appear inside the list item text.

Использование пользовательского изображения как маркер

Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

ul  list-style-image: url(star.svg); >

Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background , о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

ul  padding-left: 2rem; list-style-type: none; > ul li  padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; >

Мы сделали следующее:

Установили padding-left элемента с 40px по умолчанию на 20px , затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
Установили list-style-type (en-US) на none , для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
- background-image : Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
- background-position : Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0 , что значит что маркер будет появляться в самом верху слева каждого пункта списка.
- background-size : Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem ( 16px ), что очень хорошо сочетается с отступом (padding) 20px , который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
- background-repeat : По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat .
Это даёт нам следующий результат:

короткая запись list-style

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:
```
ul  list-style-type: square; list-style-image: url(example.png); list-style-position: inside; > 
```
Может быть заменён этим:
```
ul  list-style: square url(example.png) inside; > 
```
Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc , none , и outside ). Если указаны и type и image , тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

Контроль счета списка

Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

start

Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:
```
ol start="4"> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> 
```
что даст вам такой результат:

reversed

Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:
```
ol start="4" reversed> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> 
```
что даст вам такой результат:

Примечание: Если пунктов в списке в обратном списке больше, чем значение атрибута start , счёт продолжится до нуля и далее отрицательные значения.

value

Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:
```
ol> li value="2">Toast pita, leave to cool, then slice down the edge.li> li value="4"> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li value="6">Wash and chop the salad.li> li value="8">Fill pita with salad, hummus, and fried halloumi.li> ol> 
```
что даст вам такой результат:

Примечание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value .

Активное изучение: Стилизация вложенного списка

В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:
1. Задали неупорядоченному списку квадратные маркеры.
2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
3. Задали упорядоченному списку маркеры в виде строчных букв.
4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.
Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.
```
div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> ul> li>First, light the candle.li> li>Next, open the box.li> li>Finally, place the three magic items in the box, in this exact order, to complete the spell: ol> li>The book of spellsli> li>The shiny rodli> li>The goblin statueli> ol> li> ul>textarea > h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">textarea> h2>Outputh2> div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;" /> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;" /> div> div> 
```
```
var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput()  output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function ()  htmlInput.value = htmlCode; cssInput.value = "ul \n\nul li, ol li \n\nol "; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); 
```
Смотрите также

Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:

Заключение

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

В этом модуле
- Основы стилизации текста и шрифта
- Стилизация списков
- Стилизация ссылок
- Веб-шрифты
- Вёрстка домашней страницы общественной школы
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как выровнять списки по центру в css

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

Как выровнять список по центру шаблона
Добрый день. Возник вот такой вопрос "Как выровнять список по центру шаблона" вот код html.

Блок не стоит по центру, как сделать по центру
Всем привет, помогите нубу) Сайт получается http://1a-med.ru/ Я не как не могу сделать, чтобы.

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

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

Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list .

Горизонтальный список

Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.

Вариант 1. Сделать элементы списка строчными

Получаем список такого вида:
- элемент списка 1
- элемент списка 2
- элемент списка 3
Вариант 2. Сделать элементы списка плавающими

Получаем такой же список:
- элемент списка 1
- элемент списка 2
- элемент списка 3
На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок.

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block !

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:

Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding .

Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.

Вот как это может выглядеть:

Параграф до списка

Параграф после списка

Согласитесь, не очень красиво.

Решение

В результате получаем:

Параграф до списка

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul . Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden , в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список — редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list , и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

Для всех остальных списков, с установленным значением атрибута class , будут применяться стили по умолчанию.

Как выровнить по центру блок с элементами DIV, UL, LI

Admin 18.12.2017 , обновлено: 09.05.2018 CSS, HTML

Разбираем центровку блочных элементов в CCS. Располагаем по центру несколько DIV или LI элементов. Предлагаю несколько своих вариантов на большинство случаев.

В этой статье нет цели привести все варианты центровки и переписать то, что уже где-то есть. Не помню уже почему, но меня часто не устраивали предлагаемые варианты. Либо там были фиксированные блоки либо все слетало при адаптивной вёрстке либо ещё какие недостатки.

Иногда для выравнивания по центру достаточно добавить пару атрибутов и не нужно ничего сложного городить. Например, так я центрировал рекламу РТБ от Яндекс.

Ниже несколько вариантов адаптивной вёрстки выравнивания блоков по центру, которые я использую на своих сайтах. И если первый достаточно распространённый, то возможно, какие-то другие способы даже не будут описаны в Интернете именно таким образом.

Вариант 1

Отцентрируем содержимое UL из 4 элементов LI, которые находятся в блоке DIV с классом container.

В таком случае в CSS достаточно следующих правил:

Получим следующий вид:

Здесь отцентрировано 4 элемента LI. При уменьшении размеров экрана не помещающиеся элементы уходят вниз.

Если блоки LI с этими свойствами не устанавливаются по центру, значит какое-то другое свойство им мешает. Например, это может быть свойство float:left или display: table; или какое-то иное.

Теперь верхнюю структуру (в базовый каркас выравнивания CSS) можно добавить и другие стили. Например, сделать фиксированного размера блоки и отступы друг от друга:

Но в таком варианте есть один минус. Блоки расположены по центру, но слева и справа огромные расстояния. Их можно уменьшить изменяя width.

А можно сделать контейнеры одинакового размера так, чтобы отступы были только между контейнерами, а слева и справа их не будет.

Тогда мы уберём margin и добавим ширину такого width, чтобы он полностью покрывал область.

Между блоками останется небольшой участок пустого пространства. А чтобы его сделать ещё больше, можно отступать внутри с помощью параметра padding.

В блоках я специально не добавляю ничего лишнего, чтобы оставить ровно те стили которые непосредственно влияют на выравнинвание. Но если вы сделаете тоже самое, то такие блоки не получить. Хотя бы потому что, во-первых, нужно добавить цвет к блоку, а во-вторых, если он пустой поставить height: 100px;. Другие атрибуты уже по своему вкусу.

Итоговый вариант такой:

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

Вариант 2

Как выровнять все блоки div по центру так, чтобы блок на следующей строке выравнивался по левому краю?

Имеем следующую структуру:

Для них прописываем классы:

Следует обратить внимание, что если менять размеры calc, то затем надо подстраивать экспериментальным путём размеры margin. Иначе блоки не будет располагаться по центру.

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

Применив технику выше, мы получим адаптивную вёрстку, со всеми равными краями, которая не будет портиться при изменении размеров экрана.

А если мы хотим, чтобы на мобильной версии было не 3 блока, а 2, то в ccs для разрешения 768 пикселей, разобьём блоки иначе:

Получим те же блоки в мобильном варианте, но уже по два блока на строку:

Вариант 3

Теперь будем выравнивать с помощью flex. Может показаться, что это идеальный способ выравнивания, потому что он действительно работает очень просто. Однако FLEX не справляется с задачей описанной в варианте 2. По крайней мере, у меня не получалось достигнуть тех же результатов.

К следующей секции:

#cssmenu > ul > li

В приведенном примере:

Перекидывает блоки на следующую строку, если они заполняют контейнер. Иначе они будут уходить дальше за окно браузера.

Мы выравниваем содержимое блоков по центру.

Вариант 4

Ещё один вариант выравнивания с помощью технологии flex.

Имеем контейнер с двумя блоками внутри. Нам нужно, чтобы эти 2 блока делили ширину на две равные стороны.

Для этого пропишем в стилях следующие свойства:

Вариант 5

Есть ещё один вариант центровки блоков, если их строго равное количество. Например: блоков 9, по 3 на каждую строчку. И вы знаете, что так будет оставаться всегда. Например, вы делаете лендинг пейдж и знаете наверняка, что ничего лишнего между этими блоками добавляться на сайт не будет.

Итак, имеем 9 блоков следующего вида (не стал дублировать 9 раз строки, но имейте ввиду, что блоков 9):

Применяем стили для них:

.archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7)

.archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8)

.archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9)

Получим тоже адаптивную вёрстку. При уменьшении экрана не помещающийся блок будет уходить в центр низа

Преимущество данного вида центровки в том, что вы можете четко и понятно проделать отступы между блоками.

А главный недостаток, что внутрь блоков нельзя ничего поместить. Любой элемент:

будь то div или p или ещё что-то, будет считаться как внутренний элемент nth-child. В результате на него наложится стили CSS и все отступы сделанные с помощью margin сместят блоки не так как было задумано изначально.

Читайте также

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

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

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

Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.

Итак, мне нужно выравнять элемент по центру.

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

Выравнивание по центру строкового или строково-* элемента

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

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

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

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

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

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

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

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

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

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

Выравнивание многострочного элемента

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

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

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

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

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

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

Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.

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

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

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

Выравнивание элемента с помощью Flexbox

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

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

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

Выравнивание элемента с фиксированной шириной и высотой

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

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

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

Выравнивание элемента с помощью Flexbox

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

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

Похожие публикации:
1. Как сделать кнопку посередине css
2. Как сделать круглую кнопку в css
3. Как сделать меню навигации css
4. Как сделать обводку текста в html css
Рецепты CSS

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты
- Как добавить картинку на веб-страницу?
- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Читать:
Что такое null в sql