如何将我的 header 定位在我的导航中间？

Question

如何设置我的导航定位和 header 看起来像这样？

我一直在尝试搜索 google 和堆栈溢出，但找不到任何东西。

这是我的代码，谢谢。

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#wrap { margin: 0 auto; width: 700px; }

#header{

}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}

#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}

/* Edits */
#header,
#content{ clear: both; }

#header,
#header h1,
#header #nav { float: left; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gullible</title>
  <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

<div id="wrap">

    <div id="logo">
        <h1>Gullible</h1>
        <ul id="nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="shop.html">Shop</a></li>
            <li><a href="home.html">Visit</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div id="content">
        <h1></h1>
    </div>

</div>

  <footer>
  <h2>Gullible</h2>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>
</html>

Answer 1

试试 Flexbox 和 justify-content: space-around;

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

ul {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid black;
  padding: 0;
}

.logo {
  font-size: 30px;
  font-weight: bold;
  padding: 10px 0;
}

a {
  text-decoration: none;
  color: black;
}

<ul>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
  <li class="logo"><a href="">LOGO</a></li>
  <li><a href="">LINK</a></li>
  <li><a href="">LINK</a></li>
</ul>

Answer 2

只需将您的 <h1> 放在现有 <li> 中间的新 <li> 中。

<ul id="nav">
    <li><a href="home.html">Home</a></li>
    <li><a href="shop.html">Shop</a></li>
    <li><h1>Gullible</h1></li>
    <li><a href="home.html">Visit</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Answer 3

在这里，您将找到有关如何实现该目标的示例 https://jsfiddle.net/5czgjkyj/

<!DOCTYPE html>
<body>
  <div id="wrap">
    <div id="logo">
      <ul id="nav">
        <li><a href="home.html">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><h1>Gullible</h1></li>
        <li><a href="home.html">Visit</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div id="content">
      <h1></h1>
    </div>
  </div>

  <footer>
    <ul>
      <li>Home</li>
      <li>Shop</li>
      <li><h2>Gullible</h2></li>
      <li>Visit</li>
      <li>Contact</li>
    </ul>
  </footer>
</body>

css

ul {
  text-align: center;
}

ul li {
  display: inline-block;
}

如何将我的 header 定位在我的导航中间？

How can I position my header in the middle of my nav?

html

css

position