Выравнивание lo go с меню - PullRequest
Новая
       4

Выравнивание lo go с меню

0 голосов
/ 24 января 2020

Я пытаюсь выровнять простую навигационную панель с lo go слева и меню + панель поиска справа. Я просто не могу понять, как их выровнять по горизонтали. Сначала я работаю на мобильных устройствах с медиа-запросами. Я чувствую, что это должно быть действительно простым решением, но я просто не вижу его.

вот мои HTML и CSS

  @media screen and (max-width: 1499px) and (min-width: 1153px) {
  .navbar-toggle,
  .main-nav .social {
    display: none;
  }
  .main-nav {
    display: inline;
    text-align: center;
    padding: 10px 0px 10px 0px;
    margin-top: 20px;
  }
  .main-nav li {
    display: inline;
    border: none;
  }
  .main-nav a {
    padding: 10px;
  }
  .navbardesk {
    display: flex;
  }
  .logo {
    order: 0;
  }
  .mainnav {
    order: 1;
  }
  .searchicon {
    order: 3;
  }
  header {
    max-width: 1153px;
    margin-bottom: 10px;
  }
<header>

  <span class="navbar-toggle" id="js-navbar-toggle">
    <i class="fas fa-bars"></i>
  </span>

  <div class="navbardesk">
    <h1 class="logo">Buurtsuper Leo van der Drift</h1>

    <ul class="main-nav" id="js-menu">
      <li><a href="" class="nav-links">Home</a></li>
      <li><a href="" class="nav-links">Over ons</a></li>
      <li><a href="" class="nav-links">Kantoren en bedrijven</a></li>
      <li><a href="" class="nav-links">Bestellen</a></li>
      <li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
    </ul>

    <i class="fas fa-search searchicon"></i>
  </div>

  <p class="welkomtekst">
    Welkom !<br> Bij buurtsuper Leo v.d. Drift bent u aan het juiste adres als het gaat om verse producten.
  </p>
</header>

ох, и вот кодекс: https://codepen.io/radartrinkets/project/editor/XgWOvG

1 Ответ

0 голосов
/ 24 января 2020

Вы можете использовать «flex» для выравнивания предметов. Пример: 

.v-align{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

И вы используете класс "v-align" для родительского div меню и lo go, он будет центрировать ваш контент по осям X и Y. если вы хотите потерять ось X, вы можете удалить часть «justify-content»

...