Как выровнять список в html

Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS

Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.

Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li> . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

Для начала создадим обычный маркированный список, содержащий пункты нашего меню:

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu» .

По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:

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

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

<style>
ul#menu li <
display:inline-block; /* расположить пункты горизонтально */
>
</style>

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:

<style>
#menu, #menu li <
margin: 0; /* убрать внутренние отступы */
padding: 0; /* убрать внешние отступы */
>
#menu <
background: #03658e; /* цвет фона навигационной панели */
>
#menu li <
display:inline-block; /* расположить пункты горизонтально */
text-align: center; /* текст горизонтально по центру */
>
#menu a <
display: block; /* ссылка растягивается на весь пункт li */
padding: 5px 15px; /* задаем внутренние отступы */
color: #fff; /* цвет текста */
text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
>
#menu a:hover <
background: #8AB8CC; /* фон пунктов при наведении */
>
</style>

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

Горизонтальное меню по центру

Выравнять меню по центру можно так:

<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center; /* пункты и текст горизонтально по центру */
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>

<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
max-width: 550px; /* ограничение длины панели */
margin: 0 auto; /* навигационная панель по центру страницы */
text-align: center;
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>

Горизонтальное меню с пунктами одинаковой ширины

Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:

<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
background: #03658e;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%; /* задаем размер пункта можно в пикселях*/
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
>
#menu a:hover <
background: #8AB8CC;
>
</style>

<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%; /* задаем размер пункта можно в пикселях*/
>
#menu a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
background: #03658e;
margin-right: 5px; /* добавляем отступы между пунктами */
>
#menu a:hover <
background: #8AB8CC;
>
</style>

Если добавить немного трансформации:

<style>
#menu, #menu li <
margin: 0;
padding: 0;
>
#menu <
text-align: center;
>
#menu li <
display:inline-block;
text-align: center;
width: 20%;
-webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
-o-transform: skewX (-45deg); /* Трансформация Для Opera */
-ms-transform: skewX (-45deg); /* Трансформация Для IE */
transform: skewX (-45deg); /* Трансформация CSS3 */
background: #03658e;
>
#menu li a <
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
margin-left : 5px;
-webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (45deg); /* Трансформация Для Firefox */
-o-transform: skewX (45deg); /* Трансформация Для Opera */
-ms-transform: skewX (45deg); /* Трансформация Для IE */
transform: skewX (45deg); /* Трансформация CSS3 */
>
#menu a:hover <
-webkit-transform: skewX (45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (45deg); /* Трансформация Для Firefox */
-o-transform: skewX (45deg); /* Трансформация Для Opera */
-ms-transform: skewX (45deg); /* Трансформация Для IE */
transform: skewX (45deg); /* Трансформация CSS3 */
>
#menu li:hover <
background: #8AB8CC;
-webkit-transform: skewX (-45deg); /* Трансформация Для Safari и Chrome */
-moz-transform: skewX (-45deg); /* Трансформация Для Firefox */
-o-transform: skewX (-45deg); /* Трансформация Для Opera */
-ms-transform: skewX (-45deg); /* Трансформация Для IE */
transform: skewX (-45deg); /* Трансформация CSS3 */
>
</style>

то получим меню со скошенными углами:

На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!

​Как центрировать в CSS через Flexbox, Grid, Position и Margin

Сегодня мы покажем, как можно центрировать и выравнивать содержимое с помощью CSS. Ещё мы рассмотрим разные техники выравнивания.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое главная и поперечная оси в CSS

Прежде всего, давайте разберемся, что такое:

1. Главная ось.
2. Поперечная ось.

Линия, проходящая по экрану слева направо — это и есть главная ось. Вы также можете называть её осью Х или горизонтальной линией.

Линия, которая проходит сверху вниз — это поперечная ось. Также её можно назвать осью Y или вертикальной линией.

Настройка проекта

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

Запишите этот код внутри тега body:

Очистите стили браузера по умолчанию, чтобы мы получали точные результаты.

Выберите класс .container и установите его значение 100vh . В противном случае мы не сможем увидеть наш результат на вертикальной оси:

Стилизуйте класс .box-1 следующим образом:

Все готово, теперь начнем кодить!

Как использовать Flexbox для центрирования чего-либо

Мы можем использовать Flexbox для выравнивания div по осям X и Y.

Для этого нам нужно записать свойство display: flex; внутри класса .container :

Мы поэкспериментируем с этими двумя свойствами:

• justify-content;
• align-items.

Как отцентрировать что-либо по горизонтали с помощью Flexbox

Мы используем свойство justify-content , используя следующие значения.

Напишите следующий код.

Результат будет выглядеть следующим образом.

Как выровнять что-либо по вертикали с помощью Flexbox

Мы используем свойство align-items , используя следующие значения.

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

Результат выглядит так:

Как центрировать div по горизонтали и вертикали с помощью Flexbox

Мы объединим свойства justify-content и align-items , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код.

Результат выглядит следующим образом.

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

Как использовать CSS Grid для центрирования чего-либо

Используем grid для выравнивания содержимого div по осям X и Y.

Для этого нужно записать свойство display: grid; внутри класса .container :

Поэкспериментируем с этими двумя свойствами:

1. justify-content;
2. align-content.

В качестве альтернативы можно использовать эти свойства:

1. justify-items;
2. align-items.

Как выровнять что-либо по горизонтали с помощью CSS Grid

Используем свойство justify-content .

Напишите такой код:

Как выровнять что-либо по вертикали с помощью CSS Grid

Мы используем свойство align-content , используя следующие значения.

Напишите этот код:

Вот, каким будет результат:

Как выровнять div по горизонтали и вертикали с помощью CSS Grid

Объединим свойства justify-content и align-content , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код:

Результат, который должен получиться:

Альтернативный способ

Вы можете использовать свойства justify-items и align-items и получить те же результаты:

Свойство place-content в CSS Grid

Это сокращение двух свойств CSS Grid:

1. justify-content;
2. align-content.

Получаем тот же результат:

Как использовать свойство CSS Position для центрирования чего-либо

Это комбинация этих свойств:

1. position;
2. top, left;
3. transform, translate.

Напишите следующий код:

Вместе с этим кодом в CSS:

Что такое центральная точка div

По умолчанию это — центральная точка div.

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

Обратите внимание, что на изображении выше блок находится не по центру.

Написав эту строку:

Мы решим проблему и получим следующий результат.

Что такое свойство Translate в CSS

Translate — это сокращение 3 свойств:

1. translateX;
2. translateY;
3. translateZ.

Как выровнять div по горизонтали с помощью свойства CSS Position

Используем свойство left внутри класса .box-1 .

Как выровнять div по вертикали с помощью свойства CSS Position

Используем свойство top внутри класса .box-1 .

Как центрировать div по горизонтали и вертикали с помощью свойства CSS position

Чтобы достичь этого результата, мы объединим вместе свойства:

1. top, left;
2. transform, translate.

Как использовать свойство margin для центрирования чего-либо

Свойство margin является сокращением 4 свойств:

1. margin-top, margin-bottom;
2. margin-left, margin-right.

Напишите этот код:

Как выровнять div по горизонтали с помощью свойства CSS margin

Используем свойство margin внутри класса .box-1 . Напишите этот код:

Вот, как будет выглядеть результат:

Как выровнять div по вертикали с помощью свойства CSS margin

Снова используем margin внутри класса .box-1 . Напишите следующий код:

Как выровнять div по горизонтали и вертикали с помощью свойства CSS margin

И ещё разок используем margin внутри класса .box-1 . Напишите такой код:

Результат будет выглядеть так:

Заключение

Теперь вы можете уверенно выравнивать или центрировать содержимое, используя любой из этих четырех методов в CSS.

align-items

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

The interactive example below demonstrates some of the values for align-items using grid layout.

Try it

Syntax

Values

The effect of this keyword is dependent of the layout mode we are in:

• In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
• In static position of absolutely-positioned layouts, the keyword behaves as stretch .
• For flex items, the keyword behaves as stretch .
• For grid items, this keyword leads to a behavior similar to the one of stretch , except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start .
• The property doesn’t apply to block-level boxes, and to table cells.

The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.

The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.

The flex items’ margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.

The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.

The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.

The items are packed flush to the edge of the alignment container’s start side of the item, in the appropriate axis.

The items are packed flush to the edge of the alignment container’s end side of the item, in the appropriate axis.

baseline , first baseline , last baseline

All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

Flex items are stretched such that the cross-size of the item’s margin box is the same as the line while respecting width and height constraints.

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start .

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

Горизонтально центрированное меню с использованием только CSS

Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS. Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами. В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.

Пример центрированного меню

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

На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.

Разметка HTML

Все меню, примеры которых приводятся в данном уроке, используют простую структуру. Это обыкновенный неупорядоченный список ссылок, помещенный в элемент div.

Код CSS центрированного меню

Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.

Как работает метод центрирования

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

Элемент div без смещения

Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.

Элемент div со смещением влево

Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.

Стандартное выровненное влево меню

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

Обратите внимание на следующие моменты:

• Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
• Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenudiv и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
• Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
• Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.

Смещаем положение неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative; . Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.

Сдвигаем положение всех элементов меню

Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.

Несколько важных замечаний

При использовании данного метода центрирования надо помнить о нескольких важных моментах:

• Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div. Таким образом, выступающая часть элемента div будет обрезана.
• Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li.
• Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li, чтобы можно было стилизовать их индивидуально.

Заключение

Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.