Не получается центрировать ссылки по вертикали в flex

154

30 июля 2021, 15:20

Перепробовал кучу способов, куда я только не задавал align-items, ссылки просто прижимаются к верху и все. Прошу вашей помощи

    <div class="header-nav">
        <div class="header-nav-content">
            <div class="header-nav-content-left">
                <a href="#">Currency : GBP</a>
            </div>
            <div class="header-nav-content-right">
                <a href="#">Register</a>
                <a href="#">Sign in</a>
                <a href="#">empty</a>
            </div>
        </div>
    </div>

    html, body {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    /*---------header-nav--------------*/
    .header-nav {
        background: #333;
        height: 45px;
    }
    .header-nav-content {
        display: flex;
        width: 57%;
        justify-content: space-between;
        margin: 0 auto;
    }

Answer 1

Лучше не ограничивать высоту родительского блока, делая её фиксированной, а формировать за счет внутреннего контента

Результат:

html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
} 
 
 
/*---------header-nav--------------*/ 
 
.header-nav { 
  background: #333; 
  /* height: 45px; */ 
} 
 
.header-nav-content { 
  display: flex; 
  width: 57%; 
  justify-content: space-between; 
  align-items: center; 
  margin: 0 auto; 
  padding: 13.5px 0; 
} 
 
.header-nav-content a { 
  color: #fff; 
}

<div class="header-nav"> 
  <div class="header-nav-content"> 
    <div class="header-nav-content-left"> 
      <a href="#">Currency : GBP</a> 
    </div> 
    <div class="header-nav-content-right"> 
      <a href="#">Register</a> 
      <a href="#">Sign in</a> 
      <a href="#">empty</a> 
    </div> 
  </div> 
</div>