Как выровнить по центру блок с элементами 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 сместят блоки не так как было задумано изначально.
Читайте также
У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.
Выравнивание списков
Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс 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 именно для этого и было придумано!
Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:
плавающий блок
Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая 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 , будут применяться стили по умолчанию.
Как выровнять список по центру?
nav — имеет ширина 960px
ul>li — float: left;
Как сделать так чтобы список (меню) было отцентрировано в блоке nav?
- Вопрос задан более трёх лет назад
- 63874 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 4
ul ul li
Нельзя? Или именно с float надо?
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
A K @Symphony Куратор тега CSS
Вариантов куча, вот три.
html
css
Вариант 1:
nav < width: 960px; position: relative; margin: 0 auto; >nav ul < position: absolute; left: 50%; transform: translateX(-50%); >nav li
nav < width: 960px; margin: 0 auto; >nav ul < display: table; margin: 0 auto; >nav li
nav < width: 960px; margin: 0 auto; text-align: center; >nav ul < display: inline-block; >nav li
Ответ написан более трёх лет назад
Как выровнять нумерованный список по центру?
Не получается выровнять пронумерованный список по центру. Пыталась заключить в дивы, просто выравнивала элементы списка — либо пропадает нумерация, либо все на странице съезжает незнамо куда. Не могу найти, как же всё — таки выровнять, помогите.
Отслеживать
задан 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,957 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.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420