如何在屏幕尺寸达到750px时将Logo居中？

操作步骤： #

1. 移除行内浮动样式：原代码中<a>标签的style="float: left;"会干扰居中设置，必须先删除。
2. 修复HTML结构：原代码存在标签嵌套错误（ul直接嵌套ul、nav未正确闭合），先修正结构避免布局异常。
3. 添加媒体查询：通过CSS媒体查询针对≤750px的屏幕尺寸设置居中样式。

修正后的代码： #

HTML：

<nav>
  <ul class='nav-bar'>
    <li class='logo'>
      <a href="#"><img src="{{ section.settings.logo | img_url }}"></a>
    </li>
    <!-- 可补充其他导航列表项，注意ul的子元素必须是li -->
  </ul>
</nav>

CSS：

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

/* 屏幕宽度≤750px时生效 */
@media (max-width: 750px) {
  .nav-bar {
    text-align: center; /* 让导航容器内的内容居中 */
  }
  .logo {
    display: inline-block; /* 让Logo列表项不占满整行，继承父元素的居中对齐 */
  }
}

备选方案（直接针对Logo链接设置居中）： #

如果不需要调整导航容器的对齐方式，也可以直接给Logo的<a>标签设置居中：

@media (max-width: 750px) {
  .logo a {
    display: block;
    margin: 0 auto;
    width: fit-content; /* 让链接宽度适配Logo，避免占满整行 */
  }
}

内容的提问来源于stack exchange，提问作者Hyun Hae Park