Html 如何使用“对齐内容：中心”在导航栏上移动图像

下面是我的导航栏的外观：

    <div class="menu" id="menu-toggle">
    Menu
  </div>
  <nav class="manu-nav" id="menu-nav">
    <a href="#"><img src="https://www.stickpng.com/assets/images/58b061138a4b5bbbc8492951.png" height="45" /></a>

    <a class="nav-a" href="#">Home</a>
    <a class="nav-a" href="#">Cats</a>
    <a class="nav-a" href="#">Litters</a>
    <a class="nav-a" href="#">Toys</a>
    <a class="nav-a" href="#">About us</a>
    <a class="nav-a" href="#">Contact us</a>

  </nav>

菜单

我试图将图像从“主页”按钮移开，但是如果我使用了填充或边距，整个事情都会发生变化，因为导航栏已经获得了

justify content:center样式，有没有办法保持navabar选项按钮居中，只移动徽标

试试这个


*{
保证金：0；
填充：0；
}
.标志{
宽度：10%；
显示：内联块；
}
身体{
}
导航ul{
保证金：0；
填充：0；
}
李国荣{
列表样式：无；
利润率：1%；
字号：2em；
显示：内联块；
}
海军ulli a{
文字装饰：无；
浮动：左；
文本对齐：居中；
字体系列：“Gloria Halleujah”，草书；
颜色：#E6；
}
导航{
溢出：隐藏；
背景色：#214569；
位置：固定；
排名：0；
宽度：100%；
}
nav ul li:悬停{
背景色：#8C9DBF；
}
/*
导航p{
排名：0；
浮动：对；
字体系列：“Gloria Halleujah”，草书；
字号：1.5em；
}
*/
标题{
背景色：#214569；
不透明度：0.7；
}
.社会媒体{
宽度：10%；
显示：内联块；
位置：绝对位置；
排名：0；
右：0；
}
氢{
字体系列：“Gloria Halleujah”，草书；
颜色：#7D0CE8；
字号：5em；
文本阴影：4px4px4px#fff；
不透明度：.9；
位置：相对位置；
文本对齐：居中；
最高：32%；
}
h1{
字体系列：“永久标记”，草书；
字号：9em；
颜色：#7D0CE8；
文本阴影：4px4px4px#fff；
不透明度：.8；
位置：相对位置；
文本对齐：居中；
最高：30%；
}
#第二背景{
背景：url（img/salad02.jpg）无重复；
背景尺寸：封面；
高度：1400px；
宽度：自动；
}
#第三个背景{
背景：url（）不重复；
背景尺寸：封面；
高度：1000px；
宽度：自动；
}

海克餐厅







干草
亚美尼亚特色菜
这里什么都没有
可以为image.site\u left\u img添加类，然后添加css

.site_left_img {
  position: absolute;
  left: 3%;
  top: 0;
}

你想让标志在左边，导航链接居中吗？同样，请参考这一点，有没有办法将图像保持在一个位置？当我更改页面宽度时，徽标正在更改位置您可以调整左侧位置是的，但在某一点上徽标覆盖了主页按钮，我是否可以阻止它越过另一个
a标签
？此时您可以更改标签的字体大小和填充