Выровнять div по вертикали внутри элемента nav - PullRequest
Новая
       1

Выровнять div по вертикали внутри элемента nav

0 голосов
/ 20 мая 2018

Можно ли отобразить пункты меню в (вертикальной) середине элемента?

Я посмотрел более 10 видео по центру и просмотрел около 20 онлайн-уроков.Каждый использует jQuery / Bootstrap и встроенные классы.Я воссоздаю каждый эффект вручную, но не могу заставить div элементов меню опуститься до середины.

https://jsfiddle.net/2zwxL14q/

HTML: 

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav>
    <h1 style="height: 75px; width: 200px; background: #f00;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>

</body>
</html>

CSS: 

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
  z-index: 100;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

дайте nav этот стиль 

display: flex;
justify-content: space-between;
align-items: center;

, тогда вы nav окажетесь полностью посередине, как вы ожидали 

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
 <nav>
    <h1 style="height: 75px; width: 200px; background: #f00;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>
0 голосов
/ 20 мая 2018

Что вы думаете об этом?

Пример использования StackOverflow: 

nav {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 10px;
  position: fixed;
  text-align: right;
  background-color: #13293d;
  box-sizing: border-box;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
  display: block;
  text-align: center;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav>
    <h1 style="height: 75px; width: 200px; background: #f00; position: absolute;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...