Выравнивание элементов с разным line-height

113

06 августа 2019, 10:30

Взялся сверстать макет для практики. Опыт в верстке небольшой. Возник вопрос по верстке меню навигации в header'е: у элементов (логотип, список и контакты) по макету разный line-height. В результате по умолчанию они находятся на разной высоте строки. Выровнял их при помощи свойства align-items: baseline;. Однако полагаю, что эта конструкция не слишком надежна - добавится новый элемент с другой высотой строки и всё поедет. Подскажите, есть универсальный и надежный способ выравнивания элементов с разной высотой строки? Можно ли в данном случае сверстать по-другому?

Код:

.main-navigation { 
  display: flex; 
  align-items: baseline; 
  padding-top: 62px; 
} 
 
.main-header-logo { 
  margin-right: 47px; 
} 
 
.site-navigation { 
  padding: 0; 
  margin: 0; 
  list-style: none; 
  display: flex; 
} 
 
.site-navigation li:not(:last-child) { 
  margin-right: 44px; 
} 
 
.site-navigation li a { 
  font-size: 13px; 
  line-height: 32.06px; 
  text-transform: uppercase; 
  color: #2d2829; 
} 
 
.working-info { 
  margin: 0; 
  margin-left: auto; 
  font-family: 'Circe', sans-serif; 
  font-weight: 700; 
  font-size: 15px; 
  line-height: 39.53px; 
}

<a class="main-header-logo"> 
  <img src="img/logo.png" width="67" height="18" alt="Логотип магазина Cakes"> 
</a> 
<ul class="site-navigation"> 
  <li><a href="#">Наши торты</a></li> 
  <li><a href="#" class="site-navigation-custom">Индивидуальный заказ</a></li> 
  <li><a href="#">Отзывы</a></li> 
  <li><a href="#">О нас</a></li> 
  <li><a href="#">Как заказать</a></li> 
  <li><a href="#">Контакты</a></li> 
</ul> 
<p class="working-info">+7 906 899 92 96</p>

Ссылка на jsfiddle

Answer 1

Можно воспользоваться свойством align-items: center;

Если Вы это имели ввиду:

header { 
  display: flex; 
  align-items: center; 
  background: #212121; 
} 
 
.logo { 
  background: green; 
  width: 30%; 
  text-align: center; 
} 
 
.logo p { 
  line-height: 80px; 
} 
 
nav { 
  width: 60%; 
  background: pink; 
  text-align: center; 
} 
 
nav p { 
  line-height: 30px; 
} 
 
.contacts { 
  background: red; 
  text-align: center; 
  width: 10%; 
} 
 
.contacts p { 
  line-height: 120px; 
}

<header> 
  <div class="logo"> 
    <p>Logo</p> 
  </div> 
  <nav> 
    <p>Navigation</p> 
  </nav> 
  <div class="contacts"> 
    <p>Contacts</p> 
  </div> 
</header>