以图像为中心的导航菜单

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

据我所知，实现此目的的最佳方法是为所有 <li> 元素设置相同的 width 属性，但包含图像的元素除外：

   <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-desktop class 中添加 nav 样式并删除 padding-top: 30px;

nav{
  text-align:center;
}

Revise Fiddle

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 刚得到左边填充，这就是为什么我的徽标不在中间而是在右边的原因。

谢谢大家！

以图像为中心的导航菜单

Navigation menu centered by the image

html

css

image

menu

centering