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

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

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

Вопрос задан 7 лет 7 месяцев назад

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

Просмотрен 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

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

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

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

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

Почта

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

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

Как выровнять меню по правой стороне, либо по центру? — Вопрос от 12 1000

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

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

Основное

• Вопросы новичков (16633)
• Платные услуги (2156)
• Вопросы по uKit (82)

Контент-модули

• Интернет-магазин (1442)
• Редактор страниц (236)
• Новости сайта (501)
• Каталоги (809)
• Блог (дневник) (114)
• Объявления (296)
• Фотоальбомы (434)
• Видео (257)
• Тесты (60)
• Форум (581)

Продвижение сайта

• Монетизация сайта (221)
• Раскрутка сайта (2463)

Управление сайтом

• Работа с аккаунтом (5351)
• Поиск по сайту (427)
• Меню сайта (1769)
• Домен для сайта (1541)
• Дизайн сайта (13496)
• Безопасность сайта (1486)
• Доп. функции (1308)

Доп. модули

• SEO-модуль (225)
• Опросы (63)
• Гостевая книга (99)
• Пользователи (433)
• Почтовые формы (320)
• Статистика сайта (198)
• Соц. постинг (213)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (645)
• PHP и API на uCoz (236)
• SMS сервисы (10)
• Вопросы по Narod. ru (430)
• Софт для вебмастера (39)

…

Как центрировать панель навигации с помощью CSS или HTML?

спросил 11 лет, 11 месяцев назад

Изменено 1 год, 10 месяцев назад

Просмотрено 439 тысяч раз

У меня возникают проблемы с центрированием панели навигации на этой странице.

Я пробовал nav { margin: 0 auto; } и еще куча способов, но я все равно не могу отцентровать.

• HTML
• CSS
• навигация
• центрирование

4

 #нав ул {
    отображение: встроенный блок;
    тип стиля списка: нет;
}
 

Должно работать, проверил на вашем сайте.

5

Добавьте CSS:

 div#nav{
  выравнивание текста: по центру;
}
div # nav ул {
  отображение: встроенный блок;
}
 

2

Если у вас есть навигация

с классом #nav Затем вам нужно поместить этот элемент
в контейнер div. Сделайте свой контейнер div шириной 100%. и установите элемент text-align: в центр контейнера div. Затем в вашем
задайте для этого класса 3 конкретных элемента: text-align:center; положение: родственник; и отображение: встроенный блок;

, который должен центрировать его.

0

Просто добавьте:

 *{
    маржа: 0;
    заполнение: 0;
}
навигация {
    поле: 0 авто;
    выравнивание текста: по центру;
}
 

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

Вот как я это сделал:

 body {
    маржа: 0;
    заполнение: 0;
}
основной контейнер {
    поле: 0 авто;
    ширина: ___px;
    выравнивание текста: по центру;
}
ул {
    маржа: 0;
    заполнение: 0;
}
уль ли {
    поле слева: авто;
    поле справа: авто;
}
 

и не забудьте установить doctype html5

Ваш nav div на самом деле центрирован правильно. А вот ul внутри нет. Дайте ul определенную ширину и отцентрируйте ее.

Вы также можете использовать float и inline-block для центрирования навигации, как показано ниже:

 nav li {
   плыть налево;
}
навигация {
   отображение: встроенный блок;
}
 

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как выровнять панель навигации по центру с помощью CSS

спросил 8 лет, 1 месяц назад

Изменено 2 года, 3 месяца назад

Просмотрено 58 тысяч раз

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

 #nav {
  положение: абсолютное;
  слева: 0px;
  высота: 40 пикселей;
  цвет фона: #2C64B4;
  ширина: 100%;
  поле: 0 авто;
}
#нав ул {
  маржа: 0;
  заполнение: 0;
  тип стиля списка: нет;
}
#нав уль ли {
  маржа: 0;
  заполнение: 0;
  плыть налево;
}
#нав уль ли а {
  текстовое оформление: нет;
  отступ: 10px 20px;
  дисплей: блок;
  цвет: #FFF;
  выравнивание текста: по центру;
} 

 <дел>
  <ул>
    
Главная
    
    
О нас
    
    
Блин
    
    
пример