Доверьте продвижение нам
теги: ,

Категории

Рубрики

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

Если вы имеете в виду выравнивание горизонтального меню по центру страницы, это можно сделать несколькими способами в CSS. Вот несколько из них:

  1. С помощью свойств «display: flex» и «justify-content: center»:

HTML:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS:

nav {
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  display: flex;
}

li:not(:last-child) {
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: black;
}
  1. С помощью свойств «display: inline-block» и «text-align: center»:

HTML:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS:

nav {
  text-align: center;
}

ul {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}

li:not(:last-child) {
  margin-right: 20px;
}

a {
  text-decoration: none;
  color: black;
}

Оба этих метода используют свойство «display» и CSS-селекторы, чтобы центрировать меню. Они также задают стили для списков и ссылок, чтобы они выглядели как обычное горизонтальное меню. Вы можете настроить отступы, задать фон, изменить цвет шрифта и применить другие стили в соответствии с ваши макетом.

Поделиться:

Комментарии

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

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

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.