Выравнивание списков
Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс 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 , будут применяться стили по умолчанию.
Как выровнить по центру блок с элементами 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
