當徽標符合媒體屏幕尺寸時，我希望它居中(見此處照片):

我的代碼是:

.logo img {
  padding: 15px;
  width: 125px;
}

<nav>
  <ul class='nav-bar'>
    <li class='logo'>
      <a href="#" style="float: left;"><img src="{{ section.settings.logo | img_url }}"></a>
    </li>
    <ul>
      <nav>

要在屏幕大小滿足媒體查詢斷點時將徽標居中，可以使用CSS Flexbox。下面是一個示例代碼:

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  padding: 15px;
  width: 125px;
}

@media screen and (max-width: 750px) {
  .logo {
    justify-content: center;
  }
}

從錨點中移除浮動，然后使用text-align: center在環繞li(.徽標):

.logo img {
  padding: 15px;
  width: 125px;
}

.logo {
  text-align: center;
}

<nav>
  <ul class='nav-bar'>
    <li class='logo'>
      <a href="#"><img src="https://via.placeholder.com/125.jpg"></a>
    </li>
  </ul>
</nav>