Почему align-items: center не выравнивает блоки?
<div class="wrapper"> <header> <div class="header__container container"> <div class="header__logo logo"> <span>ShamySoap</span> </div> <nav class="header__menu"> <div class="header__links">Главная</div> <div class="header__links">Каталог</div> <div class="header__links">Контакты</div> </nav> </div> </header> </div> |
<div class="wrapper"> <header> <div class="header__container container"> <div class="header__logo logo"> <span>ShamySoap</span> </div> <nav class="header__menu"> <div class="header__links">Главная</div> <div class="header__links">Каталог</div> <div class="header__links">Контакты</div> </nav> </div> </header> </div>
.header__container { display: flex; align-items: center; padding: 5px; } .header__menu { display: flex; align-items: center; line-height: 1; vertical-align: middle; } .logo { font-size: 50px; font-weight: 400; font-family: Rubik; line-height: 1; vertical-align: middle; } .header__links { font-size: 20px; font-weight: 400; } |
.header__container { display: flex; align-items: center; padding: 5px; } .header__menu { display: flex; align-items: center; line-height: 1; vertical-align: middle; } .logo { font-size: 50px; font-weight: 400; font-family: Rubik; line-height: 1; vertical-align: middle; } .header__links { font-size: 20px; font-weight: 400; }
Возможно проблема в шрифте, без него всё работает. Но я скидывал архив другому человеку, у него всё выравнивалось даже с шрифтами
Дополнительно:
нормально все выравнивается
snippet
Ответы:
flex align-items: center работает. На выравнивание текста определенного шрифта в ячейке влияют и другие свойства: свойства, наследуемые от родителей, тип отображения (display) и line-height, которые у вас не задано явно. Отсюда и разное отображение
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда свойство `align-items: center` не выравнивает блоки, может возникать по нескольким причинам. Давайте рассмотрим основные из них и способы их решения.
1. Неправильное использование `align-items`: Первое, что стоит проверить, это правильное применение свойства `align-items`. Оно должно быть применено к контейнеру (родительскому элементу), а не к самим блокам (дочерним элементам). Например:
.container { display: flex; align-items: center; }
2. Недостаточная высота контейнера: Если высота контейнера меньше, чем высота его дочерних элементов, то выравнивание по центру может не работать. Убедитесь, что контейнер имеет достаточную высоту для выравнивания дочерних элементов.
3. Наличие других CSS-свойств: Другие CSS-свойства, такие как `justify-content`, могут влиять на выравнивание элементов. Убедитесь, что нет конфликтующих свойств, которые могут мешать `align-items`.
4. Отсутствие `display: flex`: `align-items` работает только в контейнерах с `display: flex`. Убедитесь, что ваш контейнер имеет это свойство.
5. Неправильно заданные размеры элементов: Если у ваших дочерних элементов заданы фиксированные размеры, то выравнивание может не сработать. Попробуйте использовать относительные размеры или `align-self: center;` для каждого дочернего элемента.
Если после проверки вы по-прежнему столкнулись с проблемой, рекомендуется создать минимальный пример кода (CodePen, JSFiddle и т.д.) и поделиться им с сообществом для получения более точной помощи.