Html 将图像徽标和品牌名称巧妙地放置在导航栏上

我正试图把我的标志很好地放在导航栏的左上角。然而，当我这样做时，品牌名称会被置于一个奇怪的位置

如果有人能告诉我如何在导航栏上巧妙地放置徽标和品牌，我将不胜感激

这是HTML：

  <nav id="navbar">
    <div className="nav-wrapper">
      <Link
        to={this.props.auth ? "/dashboard" : "/"}
        className="left brand-logo"
      >
        <img src={Logo} alt="logo" className="photo" />
        <div id="logo">Logo</div>
      </Link>
      <ul className="right">{this.renderContent()}</ul>
    </div>
  </nav>

---

我目前正在为导航栏使用materialize CSS。

您可以将

导航包装器声明为
显示：“flex”
，并使用
对齐项：“居中”。
那么它应该可以正常工作

如果这是你要找的东西，一定要告诉我

如果没有，我们可以尝试更多的事情


#导航栏{
高度：45px；
背景颜色：鲑鱼；
显示器：flex；
对齐项目：居中；
}
#导航条>分区{
利润率：10px；
}
img{
最大高度：35px；
}

静态模板
标志
只要添加此css行，您就可以开始了

.brand-logo {
  display: inline-flex !important;
}

代码沙盒：
使用弹性箱

  #navbar{
   display:flex;
   align-items:flex-start;
   justify-content:center || space-around || space-evenly;
   }

这应该可以做到，flex box可以轻松创建导航栏。
在您认为合适的地方添加边距填充。
您可以通过codesandbox共享吗。从中安装依赖项和调试需要时间here@ImranRafiqRather当然，这是代码沙盒：太好了，让我帮你调试一下：）。完成了！测试答案：）看看当代码在codesandbox上时，调试的速度有多快。问题现在解决了。我也分享了我更新的代码沙盒链接。亲爱的：）谢谢你的调试。但是，我无法加载链接。你能试着发布一个新的链接吗？谢谢当然同时尝试上面的CSS代码。将其添加到CSS文件的末尾：）根据HTML，品牌徽标在哪里？也更新了链接。品牌标识来自链接组件，来自materialize，我猜它转换成标签并设置为标签。很酷很好！！！如果可以的话。当我帮助别人时，这让我感到很高兴。。。快乐编码。
  #navbar{
   display:flex;
   align-items:flex-start;
   justify-content:center || space-around || space-evenly;
   }