Как выровнять список по центру 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 , будут применяться стили по умолчанию.

Как выровнить по центру блок с элементами 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;
>

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

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

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

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

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

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

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

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

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

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

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

Вариант 2

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

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

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

.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 пикселей, разобьём блоки иначе:

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

Вариант 3

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

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

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

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

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

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

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

Вариант 4

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

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

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

Вариант 5

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

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

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

.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

Выравнивание по центру в 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), который в большей степени будет работать для одного элемента:

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

БлогNot. О выравнивании элементов по центру средствами HTML5 и CSS3

О выравнивании элементов по центру средствами HTML5 и CSS3

Заметим, что в самом по себе HTML5 «блочных» и «строчных» элементов, по сути, нет. Роль элементов теперь, пожалуй, чисто логическая, а визуальная структура оформления, в которой есть «блочные» и «строчные» элементы, относится только к стилям CSS.

  • Блочный элемент (block) — то, что создает разрыв строки перед тегом и после него. Может содержать внутри себя элементы любого типа. Обычно блочные элементы не размещают внутри строчных, исключение — тег картинки <img> .
  • Строчный (встроенный) элемент (inline) — не создаёт разрыва строки при добавлении. Строчные элементы — потомки блочных. Обычно они игнорируют верхние и нижние отступы. Задать размеры строчных элементов с помощью CSS нельзя, можно лишь увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.

С помощью CSS элементы «взаимопревращаемы»:

Теперь типовые ситуации, когда хочется выровнять, не пользуясь отсутствующими в стандарте HTML5 атрибутами align / valign .

1. Горизонтальное выравнивание по центру страницы, для блока задана ширина

Работает, если элемент блочный. Если он строчный — задать дополнительно в стиле display: block;

1
1

2. Горизонтальное выравнивание содержимого по центру страницы, для блока не задана ширина

2
2

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

Ширина внешнего блока outbox задана относительно ширины окна, и ширина внутреннего inbox — относительно родителя.

Затем мы устанавливаем смещение дочернего блока влево на половину его ширины.

Фоновые цвета заданы просто чтобы блоки были видны.

3
3

4. Горизонтальное выравнивание по центру родительского блока, если для блоков не задана ширина

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

4
4

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

Если текст занимает одну строчку, например, это кнопка или пункт меню.

5
5

6. Вертикальное выравнивание блока в родительском блоке

6
6

7. Горизонтальное и вертикальное выравнивание табличного типа с использованием вложения блоков

Весь контент должен находиться во внутреннем блоке.

7
7

8. Выравнивание блока с заданными шириной и высотой по центру родительского блока

8
8

9. Абсолютное позиционирование пустого элемента с заданными размерами по центру страницы или блока

9
9

10. Абсолютное позиционирование непустого элемента с заданными размерами по центру страницы или блока

Здесь и в п. 9 существенно используется такая возможность современных стилей как CSS3-трансформация.

10
10

11. Абсолютное позиционирование блока по центру страницы

11
11

12. Абсолютное позиционирование блока по центру родительского блока

12
12

Для проверки кода везде использовался такой документ HTML5, кодировка Юникода UTF-8:

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

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