Как поставить лого по центру кнопок?

Question

[aristosarseno]

Как сделать так чтоб фото(лого) было по центру, а кликабельный текст справа и слева?

Comments

[Ankhena]

https://qna.habr.com/q/1088262

[godsplan]

Ankhena, у вас ссылка на этот вопрос уже в избранных закладках?)

[Ankhena]

godsplane, да и не только

Answer 1

[Лика]

Привет! Зависит от используемого HTML и CSS, вариантов есть очень много. Можешь прислать пример своего кода в любом онлайн-редакторе? Спасибо)

Comments

[aristosarseno]

я еще не начал. вот поинтересовался чтобы голову не ломать.

[Лика]

aristosarseno, ну смотри, самое простое будет что-то в таком стиле:

<style>
/* сначала весь контент в нижнем меню выравниваем по центру и вертикали */
nav { 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* потом выравниваем ссылки внутри двух половинок меню */
.menu {
    display: flex;
    align-items: center;
    max-width: calc( (100vw - 200px) / 2); /* или calc(50vw - 100px), где 200px размер картинки, а 100px половина от неё */
    /* таким способом мы делаем оба списка слева и справа от картинки одинакового размера */
}

.menu:first-of-type {
  text-align: right; /* прибиваем первый список к логотипу, второй будет норм уже по умолчанию*/
}

/* расстояния между ссылками будет меньше, чем вокруг логотипа */
.menu__item {
 margin: 0 20px;
}
.logo {
 margin: 0 40px;
 flex: 0 0 200px; /* 200px - меняем на свой размер, возможно его сделать резиновым */
}
</style>

<nav class="global-navigation">
  <ul class="menu">
   <li  class="menu__item"><a href=""></a></li> <!-- список слева -->
  <ul>
  <a href="/" class="logo" title="Go to Homepage>
      <img src="" class="logo__img" alt="New Style Logo"/> <!-- твоё лого, лучше сделать svg вместо картинки -->
  </a> 
  <ul  class="menu">
   <li  class="menu__item"><a href=""></a></li><!-- список справа -->
  <ul>
</nav>

[aristosarseno]

Лика, Спасибо большое!

[aristosarseno]

Лика, А как исправить ошибку? првый список идет под лого, а не справа.