@neznaiaka

Почему не работает aling-items?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="less/less/main.min.css">
   <link rel="stylesheet" href="сss/reset.css">
</head>
<body>
   <header class="header">

      <div class="container">
         <div class="row">
            <div class="col-lg-1">
               <img src="img/logo.png" alt="logo" class="header__logo">
            </div>
            <div class="col-lg-10">
               <nav class="header__menu">
                  <ul class="header__list">
                     <li class="header__item"><a href="header__link">Главная</a></li>
                     <li class="header__item"><a href="header__link">Программа занятий</a></li>
                     <li class="header__item"><a href="header__link">Документы</a></li>
                     <li class="header__item"><a href="header__link">Особенности садика</a></li>
                     <li class="header__item"><a href="header__link">Контакты</a></li>
                  </ul>
               </nav>
            </div>
         </div>
      </div>
   </header>
</body>
</html>


css

html, body{
   height: 100%;
}

.header{
   padding-top: 21px;
   // background: url(/img/oblako-header.png) repeat;
   font-family: sans-serif;
}
.container{
   max-width: 1170px;
   width: 100%;
   margin: 0 auto;
}

.header__list{
    display: flex;
   align-items: center;
}
.header__item{
   margin-right: 20px;
}
.header__item:last-child{
   margin-right: 0px;
}
.header__item:first-child{
   margin-left: 30px;
}
.header__link{
   color:#5894b5;
   font-size: 27px;
}
.header__link::before:hover{
   color:#f7986b;
}
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
Всё прекрасно работает: теги li выравниваются по центру поперечной линии - т.е. по высоте.
Если же нужно выравнивание по ширине, то это не aling-items, а justify-content.

Если же речь про маркер списка, то это элемент, который выравнивается по высоте первой строки содержимого li, а не по высоте самого элемента li. И если нужны маркеры по центру блока, то их придётся делать вручную:
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы