0

Здраствуйте, новичок с css. Подскажите как выровнять по вертикали в центре содержимое внутри background и сам background по отношению к headerr.

#headerr {
  background: #1775ac;
  color: #fff;
  padding: 30px 45px;
}

.menu-itemm a {
  color: #fff;
  font-weight: bold;
}

.logoo {
  font-size: 18px;
  font-weight: bold;
  margin-right: 120px;
  display: inline;
}

.main-menuu {
  padding: 0px;
  margin: 0px;
  /*Обнуление отступов у li*/
  display: inline;
}

.menu-itemm {
  margin-right: 27px;
  list-style: none;
  display: inline;
}

.phonee {
  font-weight: bold;
  font-size: 18px;
  display: inline;
  float: right;
  height: 50px;
  width: 200px;
  background: red;
  border-radius: 10px;
}

.nav {
  display: inline;
}
<section id="headerr">
  <div class="logoo">
    Название заголовка
  </div>
  <nav class="nav">
    <ul class="main-menuu">
      <li class="menu-itemm">
        <a href="#">Название пункта</a>
      </li>
      <li class="menu-itemm">
        <a href="#">Название пункта</a>
      </li>
      <li class="menu-itemm">
        <a href="#">Название пункта</a>
      </li>
    </ul>
  </nav>
  <p class="phonee">
    +7 (495) 982-53-64
  </p>
</section>

1 ответ 1

1

Отцентровать по вертикали - для родителя задать display:flex и align-items:center.
Обратите внимание, вёрстка ниже работает на ПК, но плохо себя чувствует при <600px.

#headerr {
   background: #1775ac;
   color: #fff;
   padding: 4vh 3vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logoo {
   font-size: 18px;
   font-weight: bold;
   display: block;
   width: 25%;
}

.nav {
   display: flex;
   justify-content: end;
   width: 48%;
}

.main-menuu {
   padding: 0px;
   margin: 0px;
   /*Обнуление отступов у li*/
   width: 100%;
   display: flex;
   justify-content: end;
}

.menu-itemm {
   list-style: none;
   display: inline-block;
   padding-left: 1vw;
}

.menu-itemm a {
   color: #fff;
   font-weight: bold;
}

.phonee-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
   width: 200px;
   background: red;
   border-radius: 10px;
}

.phonee {
   font-weight: bold;
   font-size: 18px;
   display: block;
}
<section id="headerr">
   <div class="logoo">
      Название заголовка
   </div>
   <nav class="nav">
      <ul class="main-menuu">
         <li class="menu-itemm">
            <a href="#">Название пункта</a>
         </li>
         <li class="menu-itemm">
            <a href="#">Название пункта</a>
         </li>
         <li class="menu-itemm">
            <a href="#">Название пункта</a>
         </li>
      </ul>
   </nav>
   <div class="phonee-wrapper">
      <p class="phonee">
      +7 (495) 982-53-64
      </p>
   </div>
</section>

Если есть желание, рекомендую погуглить "flex-вёрстка" (в коде выше используется) и "БЭМ".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.