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

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

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

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

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

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

/*-- CSS. Строчный вариант --*/ li { display:inline; padding:0 10px; }

Получаем список такого вида:

элемент списка 1
элемент списка 2
элемент списка 3

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/ ul { list-style: none; /* убираем маркеры, если нужно */ } li { float: left; /* для выравнивания по правому краю - right */ padding: 0 10px; }

Получаем такой же список:

элемент списка 1
элемент списка 2
элемент списка 3

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

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

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

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

Плавает элемент, у которого свойству float присвоено
значение left или right .

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

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

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

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

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

плавающий блок

пункт 1
пункт 2

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

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

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

плавающий блок
margin-right: 25px

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

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

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

Решение

/*-- CSS --*/ /*-- Cтиль, установленный по умолчанию --*/ ul { margin: 0 0 10px 25px; } /*-- Переопределяем стили --*/ ul { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden; }

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

плавающий блок

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

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

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

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

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

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

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

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

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

/*-- CSS --*/ /*-- Для "деклассированных" списков --*/ ul:not([class]) { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden; }

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

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

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

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

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

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

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

Вариант 1

Простое выравнивание всех блоков по центру страницы.

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

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

.container ul text-align: center;
list-style: none;
>

.container li display: inline-block;
>

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

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

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

.container li <
display: inline-block;
margin: 5px;
width: 100px;
>

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

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

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

.container li <
vertical-align: top;
display: inline-block;
width: 32.899%;
>

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

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

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

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

Вариант 2

Для центровки блоков придумано очень много способов. А вот если нужно центровку сделать более умной, тут приходиться поломать голову. К счастью, я вывел один интересный способ для следующих целей:

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

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

Блок 1

Блок 2

Блок 3

Блок 4

Блок 5

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

.archive-container-for-articles <
width: 90%;
margin: 0 auto;
>

.archive-article display: inline-block;
vertical-align: top;

width: calc(33.3333% — ( 0.666666666667 * 36px ) );
margin: 0 10px 0 11px;
>

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

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

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

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

@media screen and (max-width: 768px) <
.archive-article <
width: calc(47.3333% — ( 0.666666666667 * 25px ) );
margin: 0 10px 0 20px;
>
>

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

Вариант 3

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

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

#cssmenu ul list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
>

#cssmenu > ul > li margin: 1px;
>

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

flex-wrap: wrap;

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

justify-content: center;

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

Вариант 4

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

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

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

Вариант 5

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

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

Блок 1

Блок 2

Блок 3

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

.archive-container-for-articles <
width: 100%;
text-align: center;
>

.archive-article width: 25%;
vertical-align: top;
display: inline-block;
text-align: left;
>

.archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) margin: 20px 0 30px 40px;
>

.archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) margin: 20px 40px 30px;
>

.archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) margin: 20px 40px 30px 0;
>

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

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

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

вот здесь

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

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

В 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.

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

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

Отслеживать
задан 2 мар 2020 в 13:19
Cindy Longstickluv Cindy Longstickluv
87 1 1 серебряный знак 7 7 бронзовых знаков
обернуть его блочным тегом, и написать этому тегу text-align: center; а ol display: inline-block
2 мар 2020 в 13:36

2 ответа 2

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

.test < width: 100%; text-align: center; >.center < display: inline-block>li

Отслеживать
ответ дан 2 мар 2020 в 13:38
3,947 1 1 золотой знак 8 8 серебряных знаков 22 22 бронзовых знака
добавь для li text-align: left
2 мар 2020 в 13:40
@user355827 Спасибо большое, помогло. Люблю
2 мар 2020 в 13:42
@MaximLensky поправил,спасибо за замечание
2 мар 2020 в 13:43
@MaximLensky Спасибо! <3 2 мар 2020 в 13:44

Следует использовать свойство CSS list-style-position: inside

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

Таким образом ваш код будет:

Отслеживать
ответ дан 10 апр 2023 в 21:59
11 2 2 бронзовых знака

css3
html5
веб-программирование

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

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

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

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

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