在我的导航栏中，我最左边有徽标，最右边有两面旗帜（英文/意大利文）。我知道UL是一个块元素，所以两个标志被推到下一行，但是，UL确实在导航栏的右边框和左边的标识之间居中。
当我将显示更改为UL的内联块时，标志会出现，但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>
答案 0 :(得分：1)
您可以使用flexbox来实现您的目标......
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%;
display: flex; /* DISPLAY: FLEX; */
justify-content: center; /* JUSTIFY CONTENT, HORIZONTAL CENTER */
align-items: center; /* ALIGN ITEMS TO THE VERTICAL CENTER*/
}
nav ul {
margin-left: 1%;
list-style-type: none;
text-align: center;
padding: 5px 0px 5px 0px;
}
nav ul li {
flex-grow: 1; /* STRETCH THE ITEMS TO NICELY FILL THE SPACE */
display: inline-block;
padding: 5px 0;
}
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>
答案 1 :(得分：1)
如果我理解了您的问题，您可以将徽标放在导航开头，将导航语言放在导航结束处。徽标和语言之间中心的主导航（ul元素）（左右相同的空间）。
这是我的解决方案：
index.js.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;
}
此外，您必须从CSS中的<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>中删除margin-left: 1%;。
你可以在这里找到一个工作小提琴：https://jsfiddle.net/sebastianbrosch/p9hgmetf/1/
答案 2 :(得分：0)
Flexbox应该可以解决问题。以下是您需要的关键CSS规则（另外我调整了一些内容，以便您可以更好地查看结果）。 justify-content规则指示应如何分发导航中的内容。有关CSS flexbox模型的真实概述，请参阅here。
nav {
display: flex;
justify-content: space-between;
}
img {
width: 50px;
}<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>
另一种方法如下。这告诉ul尽可能多地增长，将其他元素推向一边。
nav {
display: flex;
}
ul {
flex: 1;
}