Меню горизонтальное по центру: Как выровнять горизонтальное меню по центру? — Учимся создавать сайты — персональный блог верстальщика Заура Магомедова

alexxlab

html — Выровнять меню по центру по горизонтали и убрать list style

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

Вопрос задан

Изменён 7 лет 8 месяцев назад

Просмотрен 23k раз

Как выровнять меню по центру по горизонтали?

html:

<div>
     <ul>
         <li><a href="#portfolio">Портфолио</a></li>
         <li><a href="#education">Образование и Навыки</a></li>
         <li><a href="#about">Обо мне</a></li>
         <li><a href="#contact">Связаться</a></li>
     </ul>
</div>

css:

#nav ul li a {
    background-color: #FFF;
    position: fixed;
    width: 100%;
    height:47px;
    text-align: center;
    display: inline;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#000;
    vertical-align:middle;
}

так выглядит при тесте:

  • html
  • css
  • меню

2

Попробуйте так

#nav{
    background: #345;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height:50px;
    text-align: center;
    display: inline;
    vertical-align:middle;
}
#nav a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 19px;
    color:#FFF;
    padding: 5px;
}
#nav a:hover {
    background: #FFF;
    color: #345;
}
ul {
    margin: 0;
    padding: 12px;
    list-style: none;
}
li {
    display: inline-block;
}
<div>
     <ul>
         <li><a href="#portfolio">Портфолио</a></li>
         <li><a href="#education">Образование и Навыки</a></li>
         <li><a href="#about">Обо мне</a></li>
         <li><a href="#contact">Связаться</a></li>
     </ul>
</div>

2 

#nav{
  display: block;
  position: relative; 
}

#nav ul{
  width:300px; 
  margin:0 auto;
  display:block;
}

 
#nav ul li a {
    background-color: #FFF;
    text-align: left;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000;
}
#nav ul li{
  list-style-type: none
}
<div>
     <ul>
         <li><a href="#portfolio">Портфолио</a></li>
         <li><a href="#education">Образование и Навыки</a></li>
         <li><a href="#about">Обо мне</a></li>
         <li><a href="#contact">Связаться</a></li>
     </ul>
</div>

вот

0

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Выравнивание логотипа по центру меню с названием сайта

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

Вопрос задан

Изменён 4 года 4 месяца назад

Просмотрен 5k раз

Есть вот такой код navbar. Вот что должно получиться на выходе

Не понимаю как это сделать, выровнял всё по центру, отступ от логотипа 150px влево и вправо. Меню будет адаптивным, не думаю что через absolute будет правильное решение… Может кто-то подсказать как лучше выполнить данный код, чтобы соответствовало скрину ? Буду признателен 😉

.container {
  width: 1170px;
  margin: 0 auto;
}

.navbar {}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.nav-menu__item {
  display: flex;
  margin: 0px 15px;
}

.nav-menu__item a {
  text-decoration: none;
  color: #555555;
}

.nav-menu__item .active {
  text-decoration: none;
  color: #5363db;
}

.nav-menu__item_center {
  display: block;
  margin: 0px 135px;
}

.nav-menu__item.logo {
  position: absolute;
  top: 0;
}
<nav>
  <div>
    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Reservation</a></li>
      <li><img src="//www. anyway.website/d/logo.png" alt="YOGA"></li>
      <li><a href="#">YOGA</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Elements</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
  </div>
</nav>
  • html
  • css
  • flexbox
  • responsive

5 

.container {
  width: 1170px;
  margin: 0 auto;
}

.navbar {}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  padding: 0;
}

.nav-menu__item {
  display: flex;
  margin: 0px 15px;
}

.nav-menu__item a {
  text-decoration: none;
  color: #555555;
}

. nav-menu__item .active {
  text-decoration: none;
  color: #5363db;
}

.nav-menu__item_center {
  display: block;
}

.logo {
  padding: 0 150px;
  margin: 0;
  text-align: center;
}

.logo__link {
  display: inline-block;
}

.logo__image {
  display: block;
}
<nav>
  <div>
    <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Reservation</a></li>
      <li>
        <a href="#">
          <img src="//www.anyway.website/d/logo.png"
          alt="YOGA">
          YOGA
        </a>
      </li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Elements</a></li>
      <li><a href="#">Shop</a></li>
    </ul>
  </div>
  </nav

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

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

Вот мой код:

 <нижний колонтитул>
    <дел>
        <дел>
            <ул>
                
  • информация в нижнем колонтитуле 1
    • 
                
  • информация в нижнем колонтитуле 2
    • 
                
  • информация в нижнем колонтитуле 3
    •