使用div制作footer时，调整文本字号致同行元素下移问题咨询

嘿，我看到你在用div制作页脚时遇到了一个常见的布局小坑——调整某段文本字号后，同一行的其他元素自动下移了对吧？别担心，咱们来一步步搞定它！

问题根源 #

首先，行内元素（比如你用的<a>标签）默认是基于**基线（baseline）**对齐的。当某个元素字号变大时，它的基线位置会随之改变，就会把同一行的其他元素“挤”下去，导致错位。另外，我注意到你代码里的<a>标签有语法错误（比如href="" "Returns & Refunds"这里多了多余的引号和空格），这也可能加剧布局异常。

解决方案 #

1. 先修正HTML语法错误

把每个<a>标签里多余的引号去掉，比如错误写法：

<a style="color: white; margin-left: 10px;" href="" "Returns & Refunds">Returns & Refunds</a>

改成正确的语法：

<a style="color: white; margin-left: 10px;" href="">Returns & Refunds</a>

2. 用vertical-align统一垂直对齐

给所有行内元素（包括<a>和<img>）设置vertical-align: middle，这样不管元素字号大小，都会以中线对齐，避免错位。同时建议把内联样式提取成CSS类，方便后续维护。

修正后的完整代码 #

HTML部分

<div class="footer">
  <a href="#" class="footer-link">Returns & Refunds</a>
  <a href="#" class="footer-brand">WESHOP</a>
  <a href="#" class="footer-follow">Follow US</a>
  <br>
  <a href="#" class="footer-link">Ph:03014667736</a>
  <a href="#" class="footer-link">UNIVERSITY</a>
</div>
<img src="all.jpg" class="footer-img">

CSS部分

/* 给footer设置背景色，方便查看布局 */
.footer {
  background-color: #222;
  padding: 15px 0;
}

.footer-link {
  color: white;
  margin-left: 10px;
  text-decoration: none;
  /* 关键：统一垂直对齐 */
  vertical-align: middle;
}

.footer-brand {
  color: white;
  margin-left: 450px;
  text-decoration: none;
  font-size: 35px;
  vertical-align: middle;
}

.footer-follow {
  margin-left: 350px;
  text-decoration: none;
  background-color: white;
  font-size: 15px;
  padding: 6px 12px; /* 加内边距让按钮更美观 */
  vertical-align: middle;
}

.footer-img {
  width: 70px;
  height: 50px;
  margin-left: 510px;
  vertical-align: middle; /* 图片也要设置对齐 */
}

额外小建议 #

• 尽量避免使用内联样式，用CSS类管理样式更清晰，也方便批量修改。
• 如果你的页脚需要响应式布局，可以把固定的margin-left换成Flexbox布局，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者SYED SAAD MANSOOR