如何解决锚标签内T恤图片未垂直居中的问题？

别担心，这个问题很常见，我给你几种简单可靠的解决方法，按你的需求任选一种即可：

方法1：使用Flexbox（推荐，现代浏览器首选） #

Flexbox是实现元素居中最直观的方式，只需要给.dfa类添加几个属性，完全不需要给图片写那些复杂的内联样式：

修改后的CSS：

.dfa {
  padding: 5px 5px;
  font-size: 30px;
  width: 44px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  /* 新增以下两行，实现水平+垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dfa-tshirt {
  background: #2c4762;
  color: white;
}

简化后的图片HTML（去掉多余内联样式）：

<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
  <img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35px;" />
</a>

Flexbox会自动将容器内的元素在水平和垂直方向都居中，不管元素尺寸如何变化都能适配。

方法2：使用CSS Grid（更简洁的写法） #

和Flexbox效果一致，但代码更精简，适合喜欢极简风格的你：

修改.dfa的CSS：

.dfa {
  padding: 5px 5px;
  font-size: 30px;
  width: 44px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  /* 新增这一行就够了，一键实现居中 */
  display: grid;
  place-items: center;
}

图片的HTML同样可以简化成方法1里的样子，效果完全一致。

方法3：兼容旧浏览器（比如IE）的方案 #

如果需要支持较老的浏览器，可以用line-height和vertical-align的组合：

首先计算锚标签的总高度：.dfa宽度为44px，上下padding各5px，总高度为44px + 5px*2 = 54px，然后设置line-height等于总高度，再给图片添加vertical-align: middle：

修改后的CSS：

.dfa {
  padding: 5px 5px;
  font-size: 30px;
  width: 44px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  /* 新增这一行，匹配容器总高度 */
  line-height: 54px;
}

.dfa-tshirt {
  background: #2c4762;
  color: white;
}

/* 把图片样式移到CSS文件中 */
.dfa img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}

对应的HTML：

<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
  <img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>

为什么你原来的方法没生效？ #

你给图片加了top:0; right:0; bottom:0; left:0; margin:auto;，但这些属性只有在**父元素设置position: relative，图片设置position: absolute**时才会生效。如果想用定位方法，也可以这么改：

.dfa {
  padding: 5px 5px;
  font-size: 30px;
  width: 44px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  /* 新增相对定位 */
  position: relative;
}

.dfa img {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

不过这种方法不如Flexbox/Grid灵活，除非有特殊需求，否则还是推荐前两种方法。

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