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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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

​Как центрировать в CSS через Flexbox, Grid, Position и Margin

Сегодня мы покажем, как можно центрировать и выравнивать содержимое с помощью CSS. Ещё мы рассмотрим разные техники выравнивания.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое главная и поперечная оси в CSS

Прежде всего, давайте разберемся, что такое:

1. Главная ось.
2. Поперечная ось.

Линия, проходящая по экрану слева направо — это и есть главная ось. Вы также можете называть её осью Х или горизонтальной линией.

Линия, которая проходит сверху вниз — это поперечная ось. Также её можно назвать осью Y или вертикальной линией.

Настройка проекта

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

Запишите этот код внутри тега body:

Очистите стили браузера по умолчанию, чтобы мы получали точные результаты.

Выберите класс .container и установите его значение 100vh . В противном случае мы не сможем увидеть наш результат на вертикальной оси:

Стилизуйте класс .box-1 следующим образом:

Все готово, теперь начнем кодить!

Как использовать Flexbox для центрирования чего-либо

Мы можем использовать Flexbox для выравнивания div по осям X и Y.

Для этого нам нужно записать свойство display: flex; внутри класса .container :

Мы поэкспериментируем с этими двумя свойствами:

• justify-content;
• align-items.

Как отцентрировать что-либо по горизонтали с помощью Flexbox

Мы используем свойство justify-content , используя следующие значения.

Напишите следующий код.

Результат будет выглядеть следующим образом.

Как выровнять что-либо по вертикали с помощью Flexbox

Мы используем свойство align-items , используя следующие значения.

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

Результат выглядит так:

Как центрировать div по горизонтали и вертикали с помощью Flexbox

Мы объединим свойства justify-content и align-items , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код.

Результат выглядит следующим образом.

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

Как использовать CSS Grid для центрирования чего-либо

Используем grid для выравнивания содержимого div по осям X и Y.

Для этого нужно записать свойство display: grid; внутри класса .container :

Поэкспериментируем с этими двумя свойствами:

1. justify-content;
2. align-content.

В качестве альтернативы можно использовать эти свойства:

1. justify-items;
2. align-items.

Как выровнять что-либо по горизонтали с помощью CSS Grid

Используем свойство justify-content .

Напишите такой код:

Как выровнять что-либо по вертикали с помощью CSS Grid

Мы используем свойство align-content , используя следующие значения.

Напишите этот код:

Вот, каким будет результат:

Как выровнять div по горизонтали и вертикали с помощью CSS Grid

Объединим свойства justify-content и align-content , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код:

Результат, который должен получиться:

Альтернативный способ

Вы можете использовать свойства justify-items и align-items и получить те же результаты:

Свойство place-content в CSS Grid

Это сокращение двух свойств CSS Grid:

1. justify-content;
2. align-content.

Получаем тот же результат:

Как использовать свойство CSS Position для центрирования чего-либо

Это комбинация этих свойств:

1. position;
2. top, left;
3. transform, translate.

Напишите следующий код:

Вместе с этим кодом в CSS:

Что такое центральная точка div

По умолчанию это — центральная точка div.

Вот почему мы видим такое странное поведение блока при попытке выровнять его.

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

Написав эту строку:

Мы решим проблему и получим следующий результат.

Что такое свойство Translate в CSS

Translate — это сокращение 3 свойств:

1. translateX;
2. translateY;
3. translateZ.

Как выровнять div по горизонтали с помощью свойства CSS Position

Используем свойство left внутри класса .box-1 .

Как выровнять div по вертикали с помощью свойства CSS Position

Используем свойство top внутри класса .box-1 .

Как центрировать div по горизонтали и вертикали с помощью свойства CSS position

Чтобы достичь этого результата, мы объединим вместе свойства:

1. top, left;
2. transform, translate.

Как использовать свойство margin для центрирования чего-либо

Свойство margin является сокращением 4 свойств:

1. margin-top, margin-bottom;
2. margin-left, margin-right.

Напишите этот код:

Как выровнять div по горизонтали с помощью свойства CSS margin

Используем свойство margin внутри класса .box-1 . Напишите этот код:

Вот, как будет выглядеть результат:

Как выровнять div по вертикали с помощью свойства CSS margin

Снова используем margin внутри класса .box-1 . Напишите следующий код:

Как выровнять div по горизонтали и вертикали с помощью свойства CSS margin

И ещё разок используем margin внутри класса .box-1 . Напишите такой код:

Результат будет выглядеть так:

Заключение

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

How do I center list items inside a UL element?

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can’t seem to figure it out.

14 Answers 14

write display:inline-block instead of float:left .

http://jsfiddle.net/3Ezx2/3/

A more modern way is to use flexbox:

This should work.

Looks like all you need is text-align: center; in ul

I have run into this issue before and found that sometimes padding is the issue.

By removing padding from the ul, any li’s set to inline-block will be nicely centred:

Hope that helps anyone running into this same issue 🙂

Another way to do this:

I added the div line and it did the trick:

I had a problem slimier to yours I this quick and its the best solution I have found so far.

What the output looks like

Shows what the output of the code looks like The borders are just to show the spacing and are not needed.

Not everything here is needed to center the list items.

You can cut the css down to this to get the same effect:

The thing is ul tag comes with default margin and padding, therefore all you need to do is:

Neither text-align:center nor display:inline-block worked for me on their own, but combining both did:

In Bootstrap (4) use display: inline-flex , like so:

I overcame the problem with this solution.

The Overflow Blog

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.8.2.43557

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Выравнивание по центру в CSS: приёмы, свойства, подводные камни

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

Иллюстрация: Оля Ежак для Skillbox Media

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

В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.

Содержание:

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

Как работают способы из этого раздела, мы покажем на примере блоков div, однако применять их можно и к другим элементам: заголовкам, абзацам, изображениям, кнопкам, формам, спискам и так далее.

Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.

С помощью Flexbox

Добавьте в родительский элемент свойства display: flex, чтобы сделать элемент flex-контейнером, и justify-content: center, чтобы контент внутри контейнера расположился посередине горизонтальной оси. Обратите внимание: justify-content действует только на flex-элементы, поэтому без display: flex он не заработает.

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

Через автоотступы

Добавьте свойства margin-left: auto и margin-right: auto — они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:

Преимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае это body).

Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.

С помощью inline-блоков

Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.

Несмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными — с помощью display: inline-block.

В этом методе так же, как и в первом, размеры блока подстраиваются под содержимое. Но при желании можно явно задать ширину и высоту.

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

Каждый из трёх способов будет вести себя по-разному, если мы будем размещать по центру сразу несколько элементов. Возьмём один и тот же HTML-код и последовательно применим к нему описанные выше методы:

Flex-элементы выстраиваются в один ряд и приобретают одинаковую высоту:

С автоотступами каждый блочный элемент помещается в отдельную строку:

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

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

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

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

С помощью Flexbox

Добавьте в родительский элемент свойства display: flex (превращает элемент во flex-контейнер) и align-items: center. Второе свойство отцентрирует весь контент внутри контейнера по вертикали.

С помощью свойств position и transform

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

Родительскому элементу нужно присвоить свойство position: relative, а дочернему — position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.

Обратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе — по вертикали.

В результате получается так:

Если по какой-то причине вы не хотите использовать свойство transform, вместо него можно поставить margin. Но для этого необходимо знать размер дочернего элемента и установить отрицательный margin-top, равный половине его высоты.

Ячейки таблицы

Добавьте в родительский элемент display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle — это свойство центрирует содержимое блока по вертикали.

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

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

Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.

Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.

С помощью Flexbox

Чтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:

С помощью свойств position и transform

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

• добавить свойство left: 50%;
• установить свойству transform значение translate (-50%, -50%).

Через CSS Grid

Этот способ похож на вёрстку флексами. Нужно установить в родительском элементе свойство display: grid — оно превратит его в grid-контейнер. А в дочернем задать автоматические отступы с помощью margin: auto.

Центрирование на примерах

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

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

Самый простой способ выровнять текст по горизонтали — использовать свойство text-align: center.

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

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

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

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

Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.

Позиционирование. Если применить к элементу <p> свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.

Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.

Второй — применить стиль дочернего элемента к тегу <span> внутри <p>.

При обоих путях результат будет один и тот же:

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

Как выровнять заголовок, список или форму

К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.

Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.

Как центрировать блок

Когда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:

Как разместить блок посередине страницы

Чтобы поставить блок в центре веб-страницы, можно использовать любой из перечисленных выше способов. Однако будет два различия:

• в качестве родительского элемента выступает всё тело веб-страницы (элемент <body>);
• необязательно явно указывать высоту блока.

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

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

Позиционирование. Дополнительное отличие от описанного выше способа в том, что не нужно указывать свойство position: relative — ведь расположение <body> не зависит ни от каких других элементов.

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

Grid. Здесь мы задаём свойства как родительскому, так и дочернему элементу.

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

Центрирование изображений <img> и кнопок <button> в CSS работает почти так же, как и с блоками. В большинстве случаев вы можете просто использовать те же методы, о которых мы рассказывали ранее:

• для горизонтального центрирования (кроме автоотступов);
• для вертикального центрирования (кроме некоторых случаев во флексбоксах);
• для выравнивания посередине (кроме некоторых случаев во флексбоксах).

Если вы выравниваете картинку или кнопку по горизонтали с помощью автоотступов, добавьте ей свойство display: block, чтобы она вела себя как блок.

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

• задана высота родительского блока;
• не заданы размеры картинки;
• не указано свойство align-items.

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

В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.

Резюмируем

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