Как выровнять меню по центру css
Перейти к содержимому

Как выровнять меню по центру css

  • автор:

Как выровнять меню по центру css

aero

Написать в поддержку

headphone

Помощь онлайн

search

Проверить домен

key

Войти Валюта:

CSS: создание горизонтального меню

calendar

14 июня

heart

9689

question

Комментариев: 0

Для того, чтобы создать горизонтальное меню, вам нужно добавить в HTML-документ блок с нумерованным списком внутри. При этом одному из пунктов необходимо присвоить id. Уточним, что символ “#” означает адрес ссылки. Например:

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

Поле этого нужно сделать несколько действий:

  • Подключить таблицы одним из трех способов.
  • “Выстроить” пункты меню один за другим при помощи правила CSS:

display: inline;

  • Создать горизонтальную линию на странице, где будут отображаться пункты горизонтального меню. Обязательно укажите расстояние от края страницы:

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

  • Создать прямоугольные “окошки”, в которых будут размещены пункты меню. Кроме того нужно указать внутреннее растояние:

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

  • Настроить отображение пунктов горизонтального меню, на которые пользователь уже нажимал:

color:#493;

#menu ul li a:visited

color:#647;

color:#000;

background:#6699FF;

border-color:#227

  • Указать вид пункта текущей веб-страницы:

#menu ul li a#nowopen

background:#fff;

border-bottom: 1px solid #fff;

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

margin:0 25% 0 25%;

Горизонтальное меню в браузере:

soc-1

Также рекомендуем почитать:

CSS: создание кнопки CSS: стилизация цитат Как подключить CSS к HTML CSS: свойства шрифта CSS: текстовые эффекты CSS: свойства цвета и фона CSS: работа с блоками

  • Блог
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • RSS

Популярное в категории

blog-img-1

calendar

Июнь

heart

82335

blog-img-1

calendar

Июнь

heart

77392

blog-img-1

calendar

Октябрь

heart

58247

blog-img-1

calendar

Март

heart

45488

blog-img-1

calendar

Сентябрь

heart

39355

Создание горизонтального меню в CSS

Откройте HTML-документ и добавьте в него блок с простым нумерованным списком с тем отличием, что одному из пунктов нужно присвоить id:

Обратите внимание на то, что решетка (#) ー URL-адрес ссылки. Следующая задача ー сделать так, чтобы пункты меню располагались не один над другим, а рядом. Для этого нужно создать правило CSS:

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

border-bottom:2px solid #000000;

Создадим “прямоугольники”, в которых будут располагаться пункты меню и зададим внутреннее расстояние:

border:1px solid #000000;

padding: 3px 4px;

Настройте то, как будут отображаться пункты меню, на которые посетитель сайта уже заходил:

#menu ul li a:link

#menu ul li a:visited

#menu ul li a:hover

Укажите вид пункта текущей страницы и сохраните изменения:

#menu ul li a#nowopen

border-bottom: 1px solid #fff;

Если вы хотите выровнять меню по центру, добавьте в правило CSS следующее:

margin:0 25% 0 25%;

Меню в браузере:

Также рекомендуем почитать:

Категории

Хостинг сайтов

  • Блог
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • RSS

Популярное в категории

  • Новая услуга: VPS с выделенным накопителем
  • Новая функция в cPanel: установка бесплатного SSL-сертификата от Let’s encrypt
  • Авторизация через соцсети в Bitrix
  • Создание простого и выпадающего меню на WordPress
  • Cron в cPanel: запуск скрипта по расписанию
  • Основы JavaScript. Урок 1. Введение в JavaScript. Что такое JavaScript.
  • Что делать с ошибкой Strict Standards: Non-static method JLoader?
  • Что лучше хостинг или vps?
  • Где купить домен и хостинг?
  • Инструкция по установке ISPmanager (последняя версия)
  • SSL: понятие, суть, предназначение
  • Добро пожаловать в наш блог!

Как сделать — Меню в навигации по центру

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

Ссылка меню по центру

Создание верхней панели навигации

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

Пример

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

Example

/* Добавить черный цвет фона для верхней навигации */
.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: #4CAF50;
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 Навигации чтобы узнать больше о навигационных барах.

Выровнять меню по центру

А чего вы пытаетесь добиться? Чтобы элементы списка были по центру родительского ul или чтобы ul был по центру блока с id#templatemo_menu?

25 ноя 2014 в 8:31

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

25 ноя 2014 в 8:36

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вот такой вариант можно попробовать, в комментариях к css я написал, что добавил, и закомментировал, что убрал.

Кратко: убрал ширину у блоков и добавил display: inline-block у самого меню. По центру там уже было нужное выравнивание с помощью text-align:center у блока с #templatemo_menu . Другие центрирования можно убрать: float:center вообще не существует и margin:0 auto; , который в данном случае не работает.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 25 ноя 2014 в 8:37
MasterAlex MasterAlex
6,177 1 1 золотой знак 12 12 серебряных знаков 23 23 бронзовых знака
Спасибо. То, что нужно!
25 ноя 2014 в 8:44

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *