Не получается центрировать по ширине ссылки в меню навигации

Question

Делаю навигационное меню для сайта, но ссылки позиционируются по логотипу, нужно что бы они центрировались относительно ширине самого меню.

.logo {
  width: 4em;
  height: 3em;
  margin: 0.5% 0% 0% 0.5%;
}

.navbar {
  height: 4em;
}

.line {
  width: 98%;
  margin-left: 1%;
  height: 2px;
  border-radius: 5px;
  background: grey;
}

.link {
  color: #24292e;
  text-decoration: none;
  font-size: 1em;
  padding-left: 2%;
}

.link_login {
  float: right;
  color: #24292e;
  text-decoration: none;
  font-size: 1em;
  line-height: 4em;
  margin-right: 2%;
}

<nav class="navbar">
  <img src="http://via.placeholder.com/250x250/33ff99/555555?text=Logo" class="logo">
  <a href="index" class="link title">ScoolAsk</a>
  <a href="user" class="link">User</a>
  <a href="updates" class="link">Updates</a>
  <a href="login" class="link_login">Login</a>
</nav>
<div class="line"></div>

Заранее огромное спасибо.

Answer 1

Как вариант, можно на .navbar повесить display: flex, ссылки обернуть в отдельный блок, и выдать ему flex-grow: 1, что растянет его на всё свободное пространство, и уже относительно этой обёртки выравнивать ссылки. Так же это позволит избавится от float на .link_login

.logo {
  width: 4em;
  height: 3em;
  margin: 0.5% 0% 0% 0.5%;
}

.navbar {
  height: 4em;
  display: flex;
}

.links {
  flex-grow: 1;

  display: flex;
  justify-content: center;
  align-items: center;
}

.link {
  color: #24292e;
  text-decoration: none;
  font-size: 1em;
  padding-left: 2%;
}

.link_login {
  color: #24292e;
  text-decoration: none;
  font-size: 1em;
  line-height: 4em;
  margin-right: 2%;
}

.line {
  width: 98%;
  margin-left: 1%;
  height: 2px;
  border-radius: 5px;
  background: grey;
}

<nav class="navbar">
  <img src="img/logo.png" class="logo">
  <div class="links">
    <a href="index" class="link title">ScoolAsk</a>
    <a href="user" class="link">User</a>
    <a href="updates" class="link">Updates</a>
  </div>
  <a href="login" class="link_login">Login</a>
</nav>

<div class="line"></div>

Answer 2

Решил проблему, надо было указать в стилях лого margin: 0 -25 -25 0;

Там надо поиграться с цифрами, что бы уровнять точно.

БЛОГ НА HUSL

Не получается центрировать по ширине ссылки в меню навигации

Ответы (2 шт):