Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600

Разместить по центру меню в шапке

06.05.2020, 22:54. Показов 1451. Ответов 9
Метки css (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите пожалуйста.

Есть меню в шапке:
HTML5
1
<ul id="nav" class="nav navbar-nav">
С кодом в css:
CSS
1
2
3
4
5
6
#et-nav nav ul {
 
    margin: 0;
    padding: 0;
    
}
Как разместить этот блок в центре?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
06.05.2020, 22:54
Ответы с готовыми решениями:

Разместить пункты верхнего меню по центру | bitrix:horizontal:multilevel
Здравствуйте! В битриксе есть шаблон выпадающего меню. Но не получается разместить все пункты по центру, они оказываются слева. Помогите...

Как разместить картинку в шапке по центру?
Здравствуйте! По умолчанию, картинка в шапке слева. Хотелось бы разместить ее по центру. Как это сделать? Буду очень признателен. ...

Как выравнять картинку в шапке по центру
Доброго времени суток! Задача такая: сделать так, чтобы по краям экрана шел фон (слева и справа, соответственно), а по центру фона...

9
105 / 57 / 22
Регистрация: 20.12.2009
Сообщений: 1,277
Записей в блоге: 2
07.05.2020, 02:03
nav разместить меню внутри формы
HTML5
1
2
3
4
5
6
7
 
<form align=center>
    <div> 
        <ul> 
        </ul>
    </div>
  </form>
Цитата Сообщение от rsl89 Посмотреть сообщение
<ul id="nav" class="nav navbar-nav">
id="nav" давать такие ид\классы - плохой стиль, меняйте лучше.
0
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600
07.05.2020, 08:57  [ТС]
HTML5
1
2
3
4
5
6
<form align=center>
    <div> 
        <ul> 
        </ul>
    </div>
  </form>
такой возможности нет, в css перепробовал все популярные варианты, типа:
CSS
1
2
3
position: absolute; 
  top: 50%; 
  left: 50%;
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
07.05.2020, 09:49
Цитата Сообщение от Supersumestria Посмотреть сообщение
align=center
Устаревший атрибут

rsl89, список по умолчанию занимает всю доступную ширину родителя, поэтому, даже логически, по центру он никак не может выровняться. Варианты:
HTML5
1
2
3
4
5
<div class="wrapper">
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
  </ul>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 1 */
.wrapper{
  display:flex;
  justify-content: center;
}
 
/* 2 */
.wrapper{
  text-align:center;
}
ul{
  display: inline-block;
  text-align:left;
}
 
/* 3 */
ul{
  width:300px;
  margin:0 auto;
}
1
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600
07.05.2020, 18:54  [ТС]
Спасибо!
Связка:
HTML5
1
<div class="wrapper">
CSS
1
2
3
4
.wrapper{
  display:flex;
  justify-content: center;
}
ПОМОГЛА!

Действительно, проще было создать новый класс и его ворочить как хочешь.

Добавлено через 32 минуты
Блин! я же не учел адаптивность шаблона.
Теперь когда сайт адаптируется для меньшего экрана, это меню постоянно открыто слева, т.е. кнопка меню раскрыта(
Как быть с оставшимися функциями, которые ранее были в этом классе?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
07.05.2020, 19:55
Не знаю, мне отсюда не видно
0
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600
07.05.2020, 20:56  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
Не знаю, мне отсюда не видно
Вложил полный отрезок:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.newmegamenu{
  display:flex;
  justify-content: center;
}
 
.navbar-collapse {
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch; }
  .navbar-collapse:before, .navbar-collapse:after {
    content: " ";
    display: table; }
  .navbar-collapse:after {
    clear: both; }
  .navbar-collapse.in {
    overflow-y: auto; }
  @media (min-width: 768px) {
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none; }
      .navbar-collapse.collapse {
        display: block;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important; }
      .navbar-collapse.in {
        overflow-y: visible; }
      .navbar-fixed-top .navbar-collapse,
      .navbar-static-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        padding-left: 0;
        padding-right: 0; } }
newmegamenu - это создал я, чтобы был по центру, ранее это меню было navbar-collapse
0
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600
08.05.2020, 21:01  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
Не знаю, мне отсюда не видно
Скажите что показать? Чтобы можно было понять в чем проблема.
Сайт на локалке.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.05.2020, 22:14
Показать код, который даст возможность воспроизвести проблему
0
 Аватар для rsl89
9 / 8 / 2
Регистрация: 18.04.2020
Сообщений: 600
09.05.2020, 17:34  [ТС]
mrtoxas проблему с размещением меню решил.
Возникла другая проблема, при адаптации слева меню съеживается как положено, когда на него нажимаю оно открывается как положено, но как только убираю курсор оно закрывается и это неправильно, исходный код css:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@media (min-width: 768px) {
  .navbar-header {
    float: left; } }
 
.newmegamenu{
  display:flex;
  justify-content: center;
}
 
.navbar-collapse {
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch; }
  .navbar-collapse:before, .navbar-collapse:after {
    content: " ";
    display: table; }
  .navbar-collapse:after {
    clear: both; }
  .navbar-collapse.in {
    overflow-y: auto; }
  @media (min-width: 768px) {
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none; }
      .navbar-collapse.collapse {
          display:flex;
  justify-content: center;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important; }
      .navbar-collapse.in {
        overflow-y: visible; }
      .navbar-fixed-top .navbar-collapse,
      .navbar-static-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        padding-left: 0;
        padding-right: 0; } }
Вложил полный main.css, проблемное место начинается со строки 2880.
Вложил скрины.
Если еще что-то нужно сообщите, приложу.
Миниатюры
Разместить по центру меню в шапке  
Изображения
 
Вложения
Тип файла: 7z main.7z (65.7 Кб, 0 просмотров)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.05.2020, 17:34
Помогаю со студенческими работами здесь

Как в шапке сайта разместить картинку?
Добрый вечер всем. Пациент https://mattsekel.com/ Помогите картинку увеличить и разместить в шапке сайта.

Необходимо разместить телефон и адрес в шапке сайта
Не получается вывести телефон и адрес в шапке сайта, съезжает верстка. Использую эту тему http://demos.famethemes.com/codilight-lite/# ...

Как разместить в шапке сайта <nav> и <div> на одном уровне?
Помогите... Подскажите, пожалуйста, как разместить в шапке сайта &lt;nav&gt; и &lt;div&gt; на одном уровне. &lt;head&gt; &lt;meta...

Странный размер изображения в avocode и как его правильно разместить в шапке
Есть макет https://yadi.sk/i/CVEfBH1-QhEfsQ. В макете шапка отображается норм. Когда сохраняешь изображение и делаешь его шапкой сайта,...

Разместить ссылки по центру
Вот я столкнулся с такой проблемой. Обратите внимание на объект &quot;Понравилась ли вам статья&quot;.Ссылки &quot;да&quot; и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru