Html 如何在导航栏中设置图像中心？

这是我的代码导航栏

添加更多CSS并根据需要进行更改

文件
@介质（最大宽度：991.98px）{
.navbar品牌{
显示：无；
}
.navbar品牌中心{
显示器：flex；
调整内容：中心
}
.中心标志{
宽度：75%；
}
.导航项目{
文本对齐：右对齐；
宽度：113%；
}
}
@介质（最小宽度：993px）{
.navbar品牌中心{
显示：无；
}
}

第一步是添加2个

。一个可以在手机屏幕上看到，另一个可以在桌面上看到

完整代码：

    For Mobile in the middle before the li
    <ul class="navbar-nav">
          <a class="image-logo" href="#">
            <img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" alt="mdb logo" height="52">
          </a>
    </ul>

    For Desktop
   <ul class="navbar-nav">
                  <a class="image-logo-center" href="#">
                    <img src="https://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
                  </a>
   </ul>

  @media screen and (min-width: 992px) {
   .image-logo-center{
     height: 100px; 
     display: block; 
   }
   .image-logo{
     display: none;
   }
   }
   @media screen and (max-width: 500px) {
 .image-logo{
   position: absolute;
   height: 52px;
   top: 1%;
   left: 35%;
 }
 .image-logo-center{
   display: none;
 }
   }