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样式，并在 .nav-desktop 类中删除padding-top: 30px;

nav{
  text-align:center;
}

<强> Revise Fiddle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我明白了...我的ul刚刚填充了，这就是为什么我的徽标不在中心但更多在右边的原因。

谢谢你们！

导航菜单以图像为中心

3 个答案: