Как выровнять нумерованный список по центру?
Не получается выровнять пронумерованный список по центру. Пыталась заключить в дивы, просто выравнивала элементы списка — либо пропадает нумерация, либо все на странице съезжает незнамо куда. Не могу найти, как же всё — таки выровнять, помогите.
Отслеживать
задан 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.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как выровнять список по центру?
nav — имеет ширина 960px
ul>li — float: left;
Как сделать так чтобы список (меню) было отцентрировано в блоке nav?
- Вопрос задан более трёх лет назад
- 62327 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 4
ul ul li
Нельзя? Или именно с float надо?
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Azim Kurt @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
Ответ написан более трёх лет назад
Выравнивание по центру в CSS: приёмы, свойства, подводные камни
Как расположить что угодно по центру чего угодно с помощью каскадных таблиц стилей.
Иллюстрация: Оля Ежак для Skillbox Media
Иван Стуков
Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.
CSS существует и развивается с 1996 года. За четверть века и три редакции в этом языке появилось много разных способов отцентрировать элемент — как костыльных, так и каноничных.
В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.
- С помощью Flexbox
- Через автоотступы
- С помощью inline-блоков
- Выравнивание нескольких элементов
- С помощью Flexbox
- С помощью свойств position и transform
- Ячейки таблицы
- С помощью Flexbox
- С помощью свойств position и transform
- Через CSS Grid
- Центрирование текста по горизонтали
- Центрирование текста по вертикали
- Как выровнять заголовок, список или форму
- Как центрировать блок
- Как разместить блок посередине страницы
- Выравнивание картинок и кнопок по центру
Горизонтальное центрирование
Как работают способы из этого раздела, мы покажем на примере блоков 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-код и последовательно применим к нему описанные выше методы:
С автоотступами каждый блочный элемент помещается в отдельную строку:
Инлайн-блоки остаются в одном ряду, но у них будет разная высота (у каждого — по размеру контента). Плюс текст в них автоматически выравнивается по центру.
Вертикальное центрирование
При горизонтальном центрировании легко определить ширину родительского элемента: если она не задана явно, то обычно равна ширине экрана. При вертикальном центрировании всё немного сложнее: высоту родительского элемента приходится задавать явно с помощью свойства height.
Как и в прошлом разделе, мы будем показывать работу всех методов на примере блоков div и добавим те же границы: синие — для родительских и чёрные — для дочерних элементов. Во всех примерах будем использовать один и тот же HTML-код:
С помощью свойств 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, достаточно объединить горизонтальный и вертикальный способы:
Если добавить в абзаце автоматические отступы, то у текста как будто появятся границы, за которые он не будет выходить.
При желании также можно использовать флексбоксы, но это менее удобно, потому что в таком случае придётся явно задавать родительский элемент.
Центрирование текста по вертикали
Все способы вертикального центрирования можно использовать и для выравнивания текста. В приведённых ниже примерах голубой рамкой выделены родительские элементы.
Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.
Позиционирование. Если применить к элементу свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.
Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.
Ячейки таблицы. Здесь так же, как и в случае с флексбоксами, нужно задать стиль только для родительского элемента.
Как выровнять заголовок, список или форму
К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.
Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.
Как центрировать блок
Когда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:
- Горизонтальное центрирование
- Вертикальное центрирование
- Выравнивание по центру
Как разместить блок посередине страницы
Чтобы поставить блок в центре веб-страницы, можно использовать любой из перечисленных выше способов. Однако будет два различия:
- в качестве родительского элемента выступает всё тело веб-страницы (элемент );
- необязательно явно указывать высоту блока.
Во всех примерах результат будет одинаковым. Как и раньше, голубую и чёрную рамку используем для наглядности.
Flexbox. Недостаток этого подхода в том, что такая страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нам нужны.
При выравнивании с помощью Flexbox изображения или кнопки могут вести себя необычно. Вот в каких случаях это происходит:
- задана высота родительского блока;
- не заданы размеры картинки;
- не указано свойство align-items.
При выполнении всех трёх условий изображение или кнопка растянутся, чтобы занять всё пространство родительского элемента — от верхней границы до нижней.
В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.
Резюмируем
Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:
- Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
- Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
- Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.
Больше интересного про код в нашем телеграм-канале. Подписывайтесь!
Читайте также:
- Селекторы в CSS: что это такое, как они работают и какие бывают
- Заняться фронтенд-разработкой в 12 лет, выиграть IT‑чемпионат в 13: история Али Сулейманова
- Учимся верстать: что такое CSS
Как выровнить по центру блок с элементами 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
