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

Разбираемся в CSS
Ответить
Anonymous
 Как я могу центрировать все элементы на панелях навигации по горизонтали?

Сообщение Anonymous »

Я пытаюсь центрировать все навигационные ссылки в разделе заголовка по горизонтали. Я хочу, чтобы навигационные ссылки класса nav отображались в центре заголовка. Ниже приведен мой фрагмент HTML для раздела заголовка:

Код: Выделить всё



[img]{{ asset([/img]




[list]
[*][url={{ url(]Features[/url]
[*][url={{ url(]About[/url]
[*][url={{ url(]Contact[/url]
[/list]

Код: Выделить всё

            
[url={{ route(]Login[/url]
[url={{ route(]Register[/url]




Я пробовал использовать CSS с такими свойствами, как text-align: center, justify-content: center и display: flex, но навигационные ссылки по-прежнему появляются в правой части заголовка. Например:

Код: Выделить всё

body, html {
margin: 0;
padding: 0;
font-family: Montserrat, sans-serif;
height: 100%; /* Ensures full height of the page */
}

/* Background and General Layout */
body {
background-color: #ffffff;
color: #333;
display: flex;
flex-direction: column;
justify-content: space-between; /* Ensures footer is pushed to the bottom */
align-items: center;
padding: 20px;
height: 100%;
}

/* Header Styling */
.header {
background-color: rgb(146, 180, 210);
padding: 1rem 0;
width: 100%;
text-align: center;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
/* display: flex;
justify-content: center; */
}

.nav li{
font-weight: bold;
}
Несмотря на мои попытки, навигационные ссылки остаются выровненными по правому краю из-за применения к контейнеру класса Justify-content-between.
Что Я хочу добиться:
  • Логотип должен оставаться сверху или слева (в зависимости от макета) шапки.
  • Все три навигационные ссылки («Особенности», «О программе», «Контакты») должны быть расположены горизонтально. по центру посередине заголовка.


Подробнее здесь: https://stackoverflow.com/questions/793 ... ation-bars
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»