Как в html сделать меню по центру

Выравнивание навигации по страницам

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

Такая навигация обычно формируется посредством не маркированного списка — тег ul, элементы которого являются блочными контейнерами — li. Так как наши новости постепенно добавляются, то мы не можем определять их точное количество, в таком случае нам нужно универсальное решение. Чтобы установить элементы навигации в одну строку — воспользуемся свойством float. Расположить этот блок логичнее всего будет по центру экрана, как это показано в примере

Исходя их наших размышлений, такая навигация будет иметь следующий код:

В примере этого кода мы попробовали выровнять блок с навигацией стандартным способом, используя для дочернего элемента свойство text-align. Однако, если прогоним наш код через браузер, то убедимся, что традиционное центрование не срабатывает. Это происходит из-за того, что ширина блока четко не определена.

Решение возникшей проблемы

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

По итогу получаем навигацию по центру страницы, как показано на рисунке

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

Также следует отметить серьезный недостаток этого метода. Наш код не сможет пройти проверку на влидацию, так как, в соответствии со спецификацией, строчный элемент не должен содержать в себе блочные теги. Замена вспомогательного строчного элемента span на блочный не допустима, так как IE не переопределит навигацию в центре страницы в таком случае.

Валидное решение

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

Результат данного способа будет совпадать с предыдущим примером. Стоит отметить следующую особенность данного решения: такая центровка будет слегка не точной, так как имеются лишние отступы. Если определены правые отступы, то его значение нужно обнулить у последнего элемента навигации, а если левые — то у первого.

Альтернативное решение без вспомогательных тегов и валидным кодом

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

Итак, это решение не нуждается в вспомогательных тегах для определения ориентации по центру. В тоже время код можно назвать семантичным и с валидацией тоже не возникает никаких проблем. Мы просто берем наш блочный не маркированный список и присваиваем ему свойство строчного элемента, воспользовавшись значением inline-block свойства display:

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

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

Как сделать меню по центру?

Нужно, чтобы горизонтальное меню (класс main-menu) было по центру.
margin:0 auto не помогает. Вот что получается jsbin.com/gurun/1
HTML:

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

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

• Facebook
• Вконтакте
• Twitter

Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает «оптический обман» ).

1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя

3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.

Как разместить элементы списка горизонтально или горизонтальное меню с помощью 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>

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

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

Как сделать — Центрированная верхняя навигация

Узнайте, как создать панель навигации со ссылкой/логотипом по центру.

Центрирование меню ссылок

Создать верхнюю панель навигации

Шаг 1) Добавить HTML:

Пример

<!— Ссылки с выравниванием по левому краю (по умолчанию) —>
<a href="#news">Новости</a>
<a href="#contact">Контакты</a>

Шаг 2) Добавить CSS:

Пример

/* Добавьте черный цвет фона в верхнюю навигацию */
.topnav <
position: relative;
background-color: #333;
overflow: hidden;
>

/* Стиль ссылок внутри панели навигации */
.topnav a <
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Изменить цвет ссылок при наведении */
.topnav a:hover <
background-color: #ddd;
color: black;
>

/* Добавьте цвет к активной/текущей ссылке */
.topnav a.active <
background-color: #04AA6D;
color: white;
>

/* Раздел по центру внутри верхней панели навигации */
.topnav-centered a <
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

/* Раздел с выравниванием по правому краю внутри верхней панели навигации */
.topnav-right <
float: right;
>

/* Адаптивное меню навигации — отображать ссылки друг над другом, а не рядом (для мобильных устройств) */
@media screen and (max-width: 600px) <
.topnav a, .topnav-right <
float: none;
display: block;
>

.topnav-centered a <
position: relative;
top: 0;
left: 0;
transform: none;
>
>

Совет: Чтобы создать удобные для мобильных устройств, адаптивные панели навигации, прочитайте главу Как сделать — Адаптивная верхняя навигация.

Совет: Перейдите к учебнику CSS Навбар на нашем сайте W3Schools на русском, чтобы узнать больше о панелях навигации.