I have my navigation bar set up with the logo on the far left and two flags for English and Italian on the far right. The issue I'm facing is that the UL element, being a block element, pushes the flags onto the next line. However, I want the UL to be centered between the right border of the navbar and the left-aligned logo.
When I tried changing the display property of the UL to inline-block, the flags did come up but then the UL was no longer centered. Does anyone have suggestions on how I can achieve this layout? Perhaps building the navbar without using a list format?
Any tips on making the UL center itself based on the positioning of these three images would be greatly appreciated!
Thank you in advance for your assistance.
Check out the code snippet here
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>