html - 如何使列表在三个图像之间的导航中居中？

Question

在我的导航栏中，最左边有 Logo ，最右边有两个旗帜(英语/意大利语)。我知道 UL 是一个 block 元素，因此这两个标志被推到下一行，但是，UL 确实在导航栏的右边界和左侧的 Logo 之间居中。

当我将显示更改为 UL 的内联 block 时，出现了标志，但 UL 不再居中 - 希望有人可以提供一些建议。我在考虑是否可以创建没有列表的导航栏？

如何根据三张图片的位置制作UL中心？

感谢您的帮助。

https://jsfiddle.net/p9hgmetf/

   nav {
     margin-left: auto;
     margin-right: auto;
     margin-top: 0px;
     z-index: 2;
     width: 1200px;
     height: 80px;
     line-height: 40px;
     background: #222;
     color: white;
     padding: 0 1%;
   }
   nav ul {
     margin-left: 1%;
     list-style-type: none;
     text-align: center;
     padding: 5px 0px 5px 0px;
     display: inline;
   }
   nav ul li {
     display: inline-block;
     padding: 5px 10px 5px 10px;
   }
   nav ul li a:link,
   nav ul li a:visited {
     color: #FFF;
     border-bottom: none;
     font-weight: bold;
     display: inline-block;
     width: 110px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
   }
   nav ul li a:hover,
   nav ul li a:active {
     opacity: .6;
   }
   nav ul li.selected {
     background-color: rgba(184, 140, 199, .8);
   }
   #logo {
     margin-top: 5px;
     float: left;
     display: inline-block;
   }
   #en {
     margin-top: 0px;
     display: inline-block;
     float: right;
   }
   #it {
     float: right;
     margin-top: 0px;
     display: inline-block;
   }

<nav>
  <a href="../index.html">
    <img src="../images/sblogo.png" alt="Logo" img id="logo">
  </a>
  <ul>
    <li class="selected"><a href="home.html">Home</a>
    </li>
    <li><a href="news.php">News</a>
    </li>
    <li><a href="artist.html">The Artist</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
  <a href="../it/home.html">
    <img src="../images/italian.jpg" alt="Cambio Lingua in Italiano" img id="it">
  </a>
  <a href="../en/home.html">
    <img src="../images/eng.jpg" alt="Change Language to English" img id="en">
  </a>
</nav>

Answer 1

如果我理解您的问题，您会将 Logo 放在导航的开头，将语言放在导航的末尾。主导航(ul 元素)位于 Logo 和语言之间(左右间距相同)。

这里是我解决这个问题的方法:

.logo {
  align-self:flex-start;
}
.nav {
  align-self:center;
}
.languages {
  align-self:flex-end;
}
nav {
  display:flex;
  justify-content:space-between;
  margin-left:auto;
  margin-right:auto;
  margin-top: 0px;
  z-index: 2;
  width: 1200px;	
  height: 80px;
  line-height: 40px;
  background: #222;
  color: white;
  padding:0 1%;
}
nav ul {
  list-style-type: none;
  text-align: center;
  padding: 5px 0px 5px 0px;
  display: inline;

}
nav ul li {
  display: inline-block;
  padding: 5px 10px 5px 10px;
}
nav ul li a:link,
nav ul li a:visited {
  color: #FFF;
  border-bottom: none;
  font-weight: bold;
  display: inline-block;
  width: 110px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
nav ul li a:hover,
nav ul li a:active {
  opacity: .6;
}
nav ul li.selected {
  background-color: rgba(184,140,199,.8);
}
#logo {
  margin-top:5px;
  float:left;
  display: inline-block;
}  
#en {
    margin-top: 0px;
    display: inline-block;
    float:right;
}
#it {
    float: right;
    margin-top: 0px;
    display: inline-block;
}

<nav>
  <div class="logo">
    <a href="../index.html">
      <img src="../images/sblogo.png" alt= "Logo" img id="logo">
    </a>
  </div>
  <div class="nav">
    <ul>
      <li class="selected"><a href="home.html">Home</a></li>
      <li><a href="news.php">News</a></li>
      <li><a href="artist.html">The Artist</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  <div class="languages">
    <a href="../it/home.html">
      <img src="../images/italian.jpg" alt= "Cambio Lingua in Italiano" img id="it">
    </a>
    <a href="../en/home.html">
      <img src="../images/eng.jpg" alt= "Change Language to English" img id="en">
    </a>
  </div>
</nav>

此外，您还必须从 CSS 中的 nav ul 中删除 margin-left: 1%;。

您可以在这里找到可用的 fiddle :https://jsfiddle.net/sebastianbrosch/p9hgmetf/1/