I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg
Using foundation to construct a website, I have designed the nav bar in the following manner:
HTML:
<nav class="top-bar">
<ul>
<li><a href="about.html">About</a></li>
<li id="menu-divider">|</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="index.html"><img src="images/logo.png" alt=""></a></li>
<li><a href="services.html">Services</a></li>
<li id="menu-divider">|</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
The current design has caused my logo (center li element) to not be perfectly centered since other li elements vary in width, resulting in collective center alignment. I am seeking assistance to have the logo at the dead center and other li elements adjusted around it.
Thank you for any guidance provided in advance!