我在导航的中间

Question

我想创建一个这样的导航面板

但我遇到问题img我不能把它放在中间

这是我的代码：

.leftNav {
  text-align: right;
  position: fixed;
  width: 49%;
  top: 0;
  left: 0;
}

.rightNav {
  position: fixed;
  width: 49%;
  top: 0;
  right: 0;
  left: auto;
}

.nav {
  margin-top: 10px;
}

.nav li {
  display: inline-block;
  margin-left: 35px;
}

.nav li:first-child {
  margin-left: 0;
}

.nav li a {
  text-decoration: none;
  color: white;
  padding: 5px 0px;
  text-transform: uppercase;
}

.wrapLogo {}

.logo {
  height: 100px;
  width: auto;
}

<header>
  <div class="wrapNav">
    <nav class="leftNav">
      <ul class="nav">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
    <div class="wrapLogo">
      <img src="./style/img/xxx.png" alt="" class="logo">
    </div>
    <nav class="rightNav">
      <ul class="nav">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
  </div>
</header>

感谢您的帮助

Answer 1

最好和最简单的解决方案是使用flexbox。

您应该将flex放在根div（.wrapNav）上，然后垂直对齐添加align-items: center;。

＆＃13;

＆＃13;

.wrapNav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav {
display: flex;
/* RESET THE LIST */
list-style: none;
padding: 0;
margin: 0;
}


.nav li a{
display: block; /* MUST BECAUSE OF THE PADDING */
text-decoration: none;
color: red;
padding:0px 5px;
text-transform: uppercase;
}

.wrapLogo {
  margin: 0 10px;
}

.logo {
height: 100px;
width: auto;
}

＆＃13;

<header>  
    <div class="wrapNav">
        <nav class="leftNav">
            <ul class="nav">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
        <div class="wrapLogo">
        <img src="http://via.placeholder.com/350x150" class="logo">
        </div>
        <nav class="rightNav">
            <ul class="nav">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
    </div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用 Flexbox 执行此操作：

＆＃13;

＆＃13;

body {margin: 0}

.wrapNav {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
  background: Aquamarine;
}

img {
  display: block; /* removes bottom margin/whitespace */
  width: 100%; /* responsiveness */
}

.nav {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.nav > li {
  margin: 0 15px;
}

.nav li a {
  text-decoration: none;
  color: #000;
  padding: 5px 0px;
  text-transform: uppercase;
}

/* addition */
@media (max-width: 568px) { /* adjust to your needs */
  .wrapNav {flex-direction: column} /* stacks flex-items vertically */
}

＆＃13;

<header>  
  <div class="wrapNav">
    <nav class="leftNav">
      <ul class="nav">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
    <img src="http://placehold.it/200x100" alt="" class="logo">
    <nav class="rightNav">
      <ul class="nav">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这样的东西？

＆＃13;

＆＃13;

.leftNav {
width:40%;
top: 0;
left: 0;
}
.rightNav {
width:40%;
top: 0;
right: 0;
left: auto;
}

.nav {
margin-top: 10px;
}

.nav li{
display: inline-block;
margin-left: 35px;
}

.nav li:first-child {
margin-left: 0;
}

.nav li a{
text-decoration: none;
color: white;
padding: 5px 0px;
text-transform: uppercase;
}
.wrapLogo {
width:20%;
}
.wrapNav{
  display: flex;
}
.logo {
height: 100px;
width: auto;
}

＆＃13;

<header style="background-color: black;">  
    <div class="wrapNav">
        <nav class="leftNav">
            <ul class="nav">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
        <div class="wrapLogo">
            <img src="http://via.placeholder.com/150x150" alt="" class="logo">
        </div>
        <nav class="rightNav">
            <ul class="nav">
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </nav>
    </div>
</header>

＆＃13;

＆＃13;

＆＃13;