以图像为中心的导航菜单答案

【问题标题】：Navigation menu centered by the image以图像为中心的导航菜单
【发布时间】：2017-07-26 08:16:58
【问题描述】：

我在将导航菜单居中时遇到问题。我希望我的徽标完全集中在网站上，并且链接围绕它内嵌。当我将整个菜单居中时，它确实居中，但我的图像不在网站的中心。

有没有一种解决方案可以让我的导航菜单以徽标为中心？

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

感谢您的帮助！

【问题讨论】：

使菜单项固定宽度，然后添加到 css margin:auto 以阻止 .nav-desktop ul。是你想要的吗？

标签： html css image menu centering

【解决方案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;
}

【讨论】：

@KacperT 很高兴我能帮上忙。快乐编码！

【解决方案2】：

仅在 .nav-desktop 类中添加 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>

【讨论】：

不幸的是它不起作用。导航居中，但我的徽标不在中心。
标志水平居中...如果您需要标志垂直居中？
我更新了我的答案，请检查。导航和徽标也水平和垂直居中

【解决方案3】：

我明白了...我的 ul 刚刚得到了左侧填充，这就是为什么我的徽标不在中心而是更靠右的原因。

谢谢大家！

【讨论】：

是的，我也总是忘记这一点 :D 避免这种情况的最佳实践总是在开始时将填充和边距设置为您正在自定义的所有项目的零。然后你可以设置任何内边距和边距，然后它就会按照你的预期运行。