Как создать меню с логотипом посередине, используя HTML и CSS

Question

Я пытаюсь создать панель навигации с логотипом посередине, причем элемент панели навигации находится на одинаковом расстоянии друг от друга.Например:

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

 header {
  width: 100%; 
  margin: 0 auto;
}

#logo {
    text-align: center;
}

.nav {
    text-align: center;
}

.nav li {
  display: inline;
  margin-left: 7em;
  margin-right: 7em;
}

/* use media query to change the layout */
@media  (min-width: 768px) {
    body {
        background-color: #f2f2f2;
    }

    .nav {
        margin-top: -42px;
    }

    .nav li:nth-child(1), .nav li:nth-child(2) {
        float: none;
    }

    .nav li:nth-child(3), .nav li:nth-child(4) {
        float: none;
    }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

<header>
  <div class="container">
    <h2 id="logo">Logo</h2>
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
  </div>
</header>

Answer 1

Вот простой пример использования позиции : абсолютный для центрирования логотипа:

Вот HTML

<header>
    <h2 id="logo">Logo</h2>
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
</header>

А вот CSS

* { /*Replace this to enable margin and padding*/
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 70px;
    position: relative;
}

#logo {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 70px;
    line-height: 70px;
    top: 0;
    left: 0;
}

.nav {
    width: 100%;
    height: 70px;
}

.nav li {
    width: 25%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    list-style: none;
    line-height: 70px;
}

Если логотип является изображением (как я полагаю), вы можете использовать этот маленький трюк:

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px; /*If logo height is 40px*/
    margin-left: -30px; /*If logo width is 60px*/
}

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

Вот пример, если вашим логотипом является изображение: https://codepen.io/Nacorga/pen/yEXaQO

Answer 2

Обновлен следующий CSS и сохранен заголовок в ul

    header {
      width: 100%; 
      margin: 0 auto;
    }


    .nav {
    text-align: center;
      display: flex;
      justify-content: space-between;
    }

    .nav li {
      display: inline;
    }
    h2 {
      margin-top: 0;
    }

header {
  width: 100%; 
  margin: 0 auto;
}


.nav {
text-align: center;
  display: flex;
  justify-content: space-between;
}

.nav li {
  display: inline;
}
h2 {
  margin-top: 0;
}
/* use media query to change the layout */
@media  (min-width: 768px) {
body {
    background-color: #f2f2f2;
}

.nav li:nth-child(1), .nav li:nth-child(2) {
    float: none;
}

.nav li:nth-child(3), .nav li:nth-child(4) {
    float: none;
}
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
width: 1170px;
  }
}

<header>
  <div class="container">

<ul class="nav">
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><h2 id="logo">Logo</h2></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Social</a></li>
</ul>
  </div>
</header>

Answer 3

Вместо flex-box вы также можете использовать grid;

.header {
  width: 100%;
}

.container {
  width: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.container div {
  grid-column: auto / span 1;
  text-align: center;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

<header class="header">
  <div class="container">
    <div><a href="#">Work</a></div>
    <div><a href="#">About</a></div>
    <div><h2 id="logo">Logo</h2></div>
    <div><a href="#">Contact</a></div>
    <div><a href="#">Social</a></div>
  </div>
</header>

Теперь не имеет значения, как установить ширину заголовка, все элементы имеют одинаковую ширину.

Answer 4

Вы можете использовать flexbox, ознакомьтесь с основами flexbox здесь

Я обновил ваш код для работы с flexbox.

Я переместил логотип в элемент ul.

  <header>
  <div class="container">
    <ul class="nav">
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><h2 id="logo">logo</h2></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Social</a></li>
    </ul>
  </div>
</header>

Я обновил ваш css для использования flexbox, обратите внимание, что .nav имеет display:flex там сейчас,

 header {
  width: 100%; 
}

#logo {
    text-align: center;
  margin-top:0;
}

.nav {
    text-align: center;
    display:flex;
}

.nav li {
  flex: 1;
    display: inline;
}

/* use media query to change the layout */
@media  (min-width: 768px) {
    body {
        background-color: #f2f2f2;
    }

    .nav {

    }

    .nav li:nth-child(1), .nav li:nth-child(2) {
        float: none;
    }

    .nav li:nth-child(3), .nav li:nth-child(4) {
        float: none;
    }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Этого должно быть достаточно, чтобы вы пошли.Вот кодекс