Список по центру
Привет, я хотел сделать список по центру. Написал список под тэгом ul. И разместил его по центру в css файле. Написав, text-align: center; Но в чем прикол, текст стал по центру, а маркеры остались слева сбоку страницы. Как это исправить?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Маркированный список с маркером по центру
Задача, нужно, чтобы маркеры всегда были по центру по вертикали, независимо от того, сколько строк.
Как выровнять список по центру шаблона
Добрый день. Возник вот такой вопрос "Как выровнять список по центру шаблона" вот код html.
Блок не стоит по центру, как сделать по центру
Всем привет, помогите нубу) Сайт получается http://1a-med.ru/ Я не как не могу сделать, чтобы.
Как выровнить резиновыь сайт по центру сайт по центру?
Здравствуйте. Как можно этот резиновый сайт выравнять по центру, чтобы при уменшении размера в.
list-style-position
Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).
Рис. 1. Значение outside
Рис. 2. Значение inside
Синтаксис
list-style-position: inside | outside
Значения
inside Маркер является частью текстового блока и отображается в элементе списка. outside Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Применение свойства list-style-position
Объектная модель
[window.]document.getElementById(» elementID «).style.listStylePosition
Браузеры
-
и значения inside свойства list-style-position , числа идущие с 10, начинают накладываться на текст списка.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
CSS по теме
Как выравнивать маркер списка относительно li по центру?
Как выравнивать маркер списка относительно li по центру?
По дефолту выравнивание по верху.
- Вопрос задан более трёх лет назад
- 3543 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Web/Android developer
Недавно отвечал на подобный вопрос.
Обрамите контент li в тег и управляете его margin ( margin-top: -5px; к примеру)
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Выравнивание списков
Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс 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 , будут применяться стили по умолчанию.