Как сделать список по центру
Как выровнять горизонтальное меню по центру?
Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.
Горизонтальное меню по центру без выпадающих пунктов
Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.
Html-код
Css-код
Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.
Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки.
Вот и все, теперь наше меню выровнялось по центру. Теперь можете добавлять, хоть убавлять пункты, на позиционирование это не повлияет. Вы также можете использовать это меню на своих сайтах, просто изменив стили под ваш дизайн.
Горизонтальное меню по центру с выпадающими пунктами
Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.
Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».
Html-код
CSS-код
Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.
Выравнивание меню по центру с помощью flexbox
Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.
Код CSS
Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь.
Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!
Выравнивание по центру в html и css
Часто от расположения блока с информацией зависит то, как будет выглядеть дизайн в общем. Выравнивание элементов — очень важная часть любой верстки. Для верстальщика расположение блоков лежит в основе создания дизайна.
Элементы бывают разные — блочные и строчные. В этой статье мы подробно разберем все способы их выравнивания. Их можно выравнивать как через CSS, так и через атрибуты в HTML. Будет подробно описано выравнивание по горизонтали и вертикали.
Выравнивание по горизонтали
Заранее скажем о том, что элементы могут быть блочными и строчными. Тег — блочный, он не требует переноса строки. Теги и так далее — строчные, каждый из них требует переноса строки.
Задать этот параметр можно через CSS. Для этого используется свойство display. display:block — блочный элемент, display:inline или inline-block — строчный и полублочный.
Выравнивание строчных элементов по горизонтали
Строчные элементы обычно не имеют никаких трудностей с выравниванием по горизонтали. Их расположение можно задать через html атрибут text-align: — выравнивает текст по центру.
Данный способ работает не со всеми элементами. Его можно применять с параграфами, заголовками, изображениями, а также таблицами.
Кроме атрибута text-align, в html имеется специальный тег. Он работает также, но немного устарел, поэтому лучше пользоваться 1 способом. Пример использования тега:
Эти способы хороши, но выравнивание через css всё равно остаётся более приоритетным вариантом.
Горизонтальное выравнивание элементов со свойством «display: block»
Но не спешите огорчаться, есть метод, который позволит выровнять его через html. Для этого нужно уменьшить его ширину. Изначально его ширина равна 100% ширины родительского элемента. Вы же можете изменить её, лучше через CSS.
Эффект может быть не заметен. Чтобы наглядно увидеть то, как это работает, задайте цвет фона или сделайте рамку для этого блока.
Немного об адаптивности — не задавайте ширину элемента в пикселях, наиболее хорошим вариантом будут проценты. То есть, если вся страница — 100%, то внутренний контент можно сделать равным 80%. Это активно используется почти на всех современных сайтах.
Свойство margin
Автоматическое выравнивание по центру:
Как только элементу будет присвоено данное свойство, он автоматически будет расположен в центре экрана.
Вышеуказанный вариант — упрощенная запись. Можно написать 4 отдельных свойства, для каждой стороны элемента:
По сути, это тоже свойство margin: 0 auto, но лучше так не писать. Вышеуказанные 4 свойства лучше использовать, когда необходимо задать особое расположение элементу.
Тем более, зачем писать больше чем нужно. Это не целесообразно, а ещё делает код более громоздким и менее оптимизированным.
Немного об адаптивности
Мы показывали работу этих методов с использованием пикселей.
Для создания хорошей адаптивной страницы, нужно указывать процентное значение. У адаптивной верстки есть большое преимущества над обычной — если ваш сайт запустят на небольшом экране, то все элементы будут смотрится гармонично, а также не будут выходить за его пределы.
Вертикальное выравнивание элемента
По вертикали можно выровнять только блочный элемент, либо же полублочный. Задаются они так:
display: block; — блочный элемент.
display: inline-block — полублочный элемент.
Внимание! Советуем делать все строчные элементы полублочными, для удобства.
Ещё в начале обучения вертикальное выравнивание может поставить в тупик. Однако, здесь всё просто, просто немного математики. Для этого просто вычисляем ширину родительского блока (того, в котором и расположен нужный элемент). Делим полученное значение на 2, с округлением в большую сторону, а затем задаем соответствующее свойство.
Пример: высота всей страницы равна 2000px, значит отступить нужно ровно 100 пикселей. Для этого задаем следующее свойство:
Выравнивает по центру, как по вертикали, так и по горизонтали.
Почему 500, а не 1000? Потому что отступы делаются снизу и сверху. 500 снизу, 500 сверху = 1000.
Но есть и более простой способ. Свойство — margin: auto. Оно располагает блок по центру.
Его минусом является то, что он не работает на всех браузерах, так как значения элементов не всегда известны.
Другие хорошие свойства:
Также неплохо использовать абсолютное позиционирование, но оно подходит для редких случаев.
Margin и padding
Эти 2 свойства хорошо подойдут для того, чтобы увеличить размер родительского блока.
margin: 300px; = padding: 300px;
Подробнее о line-height
Чтобы использовать данное свойство, вам нужно знать точную высоту блока-родителя. Если указать неверное значение, текст может неправильно переносится.
Это отличный инструмент при создании сайдбара.
Просто задаем размер line-height, такой же, как и высота родителя.
line-height:300px; — при высоте родителя в 300px.
Выравнивание иконок
Иконки могут иметь большую высоту, чем строка. Можно изменить строку через line-height, но лучше использовать свойство vertical-align.
Выравнивание таблиц
Если элемент блочный, свойство vertical-align на нем не работает. Но можно прибегнуть к одному плохому методу — вместо блочного или строчного элемента, сделать табличный. Она идеально выравнивается по вертикали, но это не очень целесообразно.
Вот пример создания таблицы:
Position: absolute
Можно сделать так, чтобы элемент был позиционирован абсолютно, то есть находился в определенном месте, внутри страницы или родительского блока.
Блок можно свободно перемещать через свойства top, left, bottom, right. По сути, вы просто задаете ему расположение относительно четырех указанных сторон.
Для большего удобства, элемент должен располагаться не внутри страницы, а в родительском блоке. Чтобы сделать это, задайте его родителю следующее свойство: position: relative.
Вот пример абсолютного позиционирования в CSS:
Хоть это и не все способы, но их вполне достаточно для хорошего позиционирования. Конечно, вы можете попробовать придумать свою конструкцию, но она может получиться очень громоздкая и вряд ли будет соответствовать стандартам.
Есть и другие хорошие способы, которые являются валидными, но не все браузеры их поддерживают. Возможно в будущем, их можно будет использовать. Но для этого нужно ждать, когда все выйдут на необходимый уровень.
Центрирование в CSS
Дата публикации: 2020-11-04
От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.
Горизонтальное центрирование
1. Встроенные элементы
text-align
Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.
Flexbox
Изменив display на flex гибкий, мы можем легко центрировать содержимое.
Даже для нескольких встроенных элементов центрирование работает без проблем.
CSS-сетка
С помощью сеточного контейнера тарелка будет центрирована в соответствии с ее областью сетки. Обратите внимание, что это не будет работать с более чем одной тарелкой, если они не будут обернуты в один элемент.
2. Блочные элементы
Auto Margin
Элемент блока с известной шириной и высотой можно центрировать, используя значение auto для левого и правого полей.
Auto Margin
Для нескольких блочных элементов их нужно заключить в элемент, который нужно центрироваться.
Flexbox
Вы можете использовать flexbox для центрирования тарелки.
Также не нужно оборачивать тарелки в контейнер, чтобы выровнять их по центру. Flexbox может это сделать!
CSS позиционирование
Абсолютно позиционируя тарелку, мы можем легко центрировать ее по горизонтали с помощью преобразований CSS.
Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
Пример 2. Использование valign
В данном примере характеристики ячеек управляются с помощью параметров тега
Пример 3. Применение стилей для выравнивания
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в документ
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и текста
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Пример 5. Выравнивание полей формы
Все способы вертикального выравнивания в CSS
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.
Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью «растягивания»
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.
Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать?
Нужно исходить из постановки задачи: