如何实现Footer中文本居左、图片居中的布局？

你当前的问题出在float: left上——这个属性会让.copyright脱离正常文档流，导致footer的text-align: center对图片完全失效，图片会被浮动的文本挤偏，没法真正居中。

这里给你两种靠谱的修复方法，按需选择：

方法一：绝对定位+Flex（无需修改HTML结构） #

这种方法不用改动HTML，仅调整CSS就能实现需求：

.copyright {
  color: #b4b4b4;
  font-size: 15px;
  margin-left: 10px;
}

footer {
  background: #303030;
  padding: 35px 0;
  width: 100%;
  position: relative; /* 让图片的绝对定位基于footer容器 */
  display: flex;
  align-items: center; /* 让文本垂直居中 */
}

.footer-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 精准让图片水平居中 */
}

方法二：Flex三等分布局（布局逻辑更严谨） #

如果想让图片完全不受左侧文本长度影响，始终保持在页面绝对中间，可以用Flex的三等分思路，仅需给HTML添加一个占位元素：

修改后的HTML #

<footer>
  <p class="copyright">Aeron © 2022</p>
  <a href="index.html" class="footer-logo-wrap">
    <img src="./images/logo.png" width="125px" title="Aeron Corporation" alt="logo">
  </a>
  <div class="footer-placeholder"></div>
</footer>

对应的CSS #

footer {
  background: #303030;
  padding: 35px 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.copyright {
  color: #b4b4b4;
  font-size: 15px;
  margin-left: 10px;
  flex: 1; /* 占据左侧1/3宽度 */
}

.footer-logo-wrap {
  flex: 1; /* 占据中间1/3宽度 */
  text-align: center; /* 图片在该区域内水平居中 */
}

.footer-placeholder {
  flex: 1; /* 占据右侧1/3宽度，和左侧区域平衡，保证图片居中 */
}

两种方法都能实现你要的「文本居左、图片居中」效果，第一种更简洁，第二种布局逻辑更清晰，适合后续功能扩展。

内容的提问来源于stack exchange，提问作者user20197071