导航菜单以图像为中心

Question

我在居中菜单时有问题。我想完美地将我的徽标完美地集中在网站上，并链接到周围。当我将整个菜单集中时，确实是集中的，但是我的图像不在网站的中心。

是否有一个解决方案将我的导航菜单通过徽标中心？

<header>
 <div class="nav-desktop">
        <nav>
            <ul>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
                <li><a href="#">Awards</a></li>
                <li><a href="#">Team</a></li>              
            </ul>           
        </nav>
    </div>
  </header>

   header
{
  background: #3f3f3f;
}
.nav-desktop
{
    width: 100%;
    position: relative;
    padding-top: 30px;
}
.nav-desktop ul
{
    list-style-type: none;
    display: inline-block;   
}
.nav-desktop ul li
{
    display: inline-block;
}
.nav-desktop ul li img
{
  vertical-align: middle;
}

这是我的jsfiddle https://jsfiddle.net/brq8f7nz/1/

感谢您的帮助！

Answer 1

我知道实现此目的的最佳方法是将相同的 width属性设置为所有<li>元素，除了持有图像的一个元素：

   <li class="menuli"><a href="#">Services</a></li>
   <li class="menuli"><a href="#">Portfolio</a></li>
   <li><img src="....."></li>
   <li class="menuli"><a href="#">Awards</a></li>
   <li class="menuli"><a href="#">Team</a></li>

在CSS中：

.menuli
{
   width:300px;
   text-align:center;
}

Answer 2

仅添加 nav样式，然后删除中的padding-top: 30px; .nav-desktop class> class

nav{
  text-align:center;
}

修订小提琴

header {
  background: #3f3f3f;
}
nav {
  text-align: center;
}
.nav-desktop {
  width: 100%;
  position: relative;
}
.nav-desktop ul {
  list-style-type: none;
  display: inline-block;
}
.nav-desktop ul li {
  display: inline-block;
}
.nav-desktop ul li img {
  vertical-align: middle;
}

<header>
  <div class="nav-desktop">
    <nav>
      <ul>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><img src="https://images82.fotosik.pl/410/7d70ec9229c54fe2.png"></li>
        <li><a href="#">Awards</a></li>
        <li><a href="#">Team</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 3

我知道了...我的UL刚得到填充，这是为什么我的徽标不在中心而不是在右边的原因。

谢谢大家！