Как выровнять списки по центру в css
Перейти к содержимому

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

  • автор:

Выравнивание навигации из блоков по центру

пример страничной навигации по середине родителя

Есть навигация (список ul). Каждый элемент списка (li) — блочный. Количество элементов навигации заранее не известно. Список в виде строки (li имеют свойство float: left/right), для того чтоб навигация была в одну строку. Нужно выровнять эту навигацию по середине родителя

Имеем следующий HTML:

.parent <
width: 100%;
text-align: center; /*пытаемся выровнять содержимое по центру */
padding: 20px 0;
background: #6699FF; /* для наглядности обозначаем родителя */
float: left; /* чтоб высота родителя была с учетом плавающих потомков */
>
ul <
list-style: none;
font-size: 12px;
margin: 0 auto;
padding: 0;
>
li <
float: left; /* выстраиваем блочные элементы в ряд */
margin-right: 4px;
width: 23px;
height: 19px;
overflow: hidden;
text-align: center;
color: #fff;
font-weight: bold;
position: relative; /* для удобного размещения ссылки внутри */
background:url(images/testFonNeactiv.png); /* фоновая картинка текущей страницы*/
cursor: default;
padding-top: 3px;
>
li a <
color: #fff;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
display: block;
background:url(images/testFonActiv.png);
text-align: center;
width: 23px;
height: 22px;
padding-top: 3px;
>

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

Решение

Для решения этой проблемы используем конструкцию:

.parent <
width: 100%; /* ширина нужна, только если блок плавающий (float) */
text-align: center; /* обязательно делаем выравнивание по центру */
float: left; /* в данном примере float нужен чтобы высота блока была с учетом плавающего содержимого */
padding: 20px 0;
background: #6699FF;
>
ul <
display: table; /* элемент типа таблицы имеет ширину, зависящую от содержимого */
width: auto; /* для уверенности что ширина будет зависеть от содержимого*/
margin: 0 auto; /* устанавливаем отступ слева и справа в auto */
list-style: none;
font-size: 12px;
padding: 0;
>
* html .parent span < /*хак для IE6, который не понимает display: table*/
display: inline-block;
>
*:first-child+html .parent span < /*хак для IE7, который не понимает display: table */
display: inline-block;
>
li <
float: left;
margin-right: 4px;
width: 23px;
height: 19px;
overflow: hidden;
text-align: center;
color: #fff;
font-weight: bold;
position: relative;
background:url(images/testFonNeactiv.png);
cursor: default;
padding-top: 3px;
>
* html li <
height: 22px;
>
li a <
color: #fff;
text-decoration: none;
position: absolute;
top: 0;
left: 0;
display: block;
background:url(images/testFonActiv.png);
text-align: center;
width: 23px;
height: 22px;
padding-top: 3px;
>

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

HTML код не пройдет проверку корректности (валидацию), т.к. элементы уровня inline (строчные) не могут содержать элементы уровня блок (блочные). Заменить в этом коде на блочный элемент (например ) не получится — в IE навигация останется прижата влево.

Альтернативное решение (валидный код)

Если отказаться от использования списка, можно сделать и по стандартам:


1
2
3
4

.parent <
width: 100%;
text-align: center;
padding: 20px 0;
background: #6699FF;
>
span <
font-size: 12px;
margin: 0 auto;
padding: 0;
width: auto;
display: table;
>
* html .parent span <
display: inline-block;
>
*:first-child+html .parent span <
display: inline-block;
> a , b <
float: left;
margin-right: 4px;
width: 23px;
height: 19px;
overflow: hidden;
text-align: center;
color: #fff;
font-weight: bold;
background:url(images/testFonActiv.png);
padding-top: 3px;
display: inline;
>
* html a , * html b <
height: 22px;
>
b <
background:url(images/testFonNeactiv.png);
cursor: default;
>

Заметка

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

Решение без дополнительных элементов с валидным HTML

update: by Александр Головко.

Это решение не требует дополнительных элементов, является семантичным и оставляет программистам чистый, валидный HTML код. Решение построено на использовании CSS свойства display:inline-block. Навигация реализована списком:

.parent < text-align: center;/*все строчные элементы будут выравниваться по центру*/ >ul < display: inline-block; /*превращаем элемент в строчный блок*/ //display: inline; /*для IE6-7 превращаем элемент в строчный*/ zoom: 1; /*присваиваем ему layout*/ font-size: 12px;/*устанавливаем размер шрифта*/ >li < float: left;/*делаем блок плавающим*/ display: inline;/*убираем двойные отступы у плавающих блоков в IE6*/ margin-right: 4px; width: 23px; height: 22px; overflow: hidden; text-align: center;/*для того, чтобы центрировать надписи в элементах списка по горизонтали*/ color: #fff; font-weight: bold; background: url(/path-to/nvigatsiya-def.gif) no-repeat; cursor: default;/*для активной страницы*/ line-height: 22px;/*для того, чтобы центрировать надписи в элементах списка по вертикали*/ >li a < color: #fff; text-decoration: none; display: block; width: 23px; height: 22px; background: url(/path-to/nvigatsiya-href.gif) no-repeat; >

Как обычно, невалидный zoom и хак для IE прячем с помощью условных комментариев.

  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с 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 , будут применяться стили по умолчанию.

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

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

      Отслеживать
      задан 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.2.16.5008

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

      nav — имеет ширина 960px
      ul>li — float: left;
      Как сделать так чтобы список (меню) было отцентрировано в блоке nav?

      • Вопрос задан более трёх лет назад
      • 62918 просмотров

      Комментировать

      Решения вопроса 0

      Ответы на вопрос 4

      yuchiko

      ul ul li

      Нельзя? Или именно с float надо?

      Ответ написан более трёх лет назад

      Комментировать

      Нравится 3 Комментировать

      Symphony

      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

      Ответ написан более трёх лет назад

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

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