父元素为链接时图片居中实现，结合文本淡出显示图片代码

这里有两种简洁可靠的方案，帮你实现图片相对于<a>父元素的居中效果，同时保留原本的文本淡出、图片显示的交互：

方案一：Flexbox布局（推荐，直观且灵活） #

Flexbox是现代布局的首选，不需要固定父元素宽高就能轻松实现居中，代码也更简洁：

完整代码 #

<div class="rightNavContainer">
  <a class="characterFade" href="#">
    <div class="fadeMe">Characters</div>
    <img class="characterLogo" src="https://openclipart.org/image/2400px/svg_to_png/103027/1293960051.png" alt="logo">
  </a>
</div>

.rightNavContainer {
  margin-top: 28px;
  width: 100%;
}

.rightNavContainer a {
  position: relative;
  margin-left: 25%;
  text-decoration: none;
  /* 关键：将a标签转为inline-block，让它成为可控制的容器 */
  display: inline-block;
  /* 使用Flex让内部元素垂直排列并水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 可选：给a标签设置宽度，确保居中效果更明显 */
  width: 160px;
}

.fadeMe {
  /* 文本淡出的过渡效果 */
  transition: opacity 0.3s ease;
}

.rightNavContainer a:hover .fadeMe {
  opacity: 0;
}

.characterLogo {
  /* 图片绝对定位，相对于a标签居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* 图片淡入的过渡效果 */
  transition: opacity 0.3s ease;
  /* 可选：限制图片最大尺寸，避免超出容器 */
  max-width: 80%;
}

.rightNavContainer a:hover .characterLogo {
  opacity: 1;
}

关键说明 #

• 把<a>标签设置为inline-block + Flex布局，让它能容纳内部元素并提供居中的基准。
• 图片用position: absolute配合transform: translate(-50%, -50%)，无论图片尺寸如何，都能精准相对于<a>标签的中心定位。
• 过渡效果保留了你原本的淡出/淡入交互逻辑。

方案二：绝对定位+margin:auto（兼容旧浏览器） #

如果需要兼容不支持Flex的旧浏览器，这个方案更稳妥，只需要给<a>标签固定宽高：

完整代码 #

<div class="rightNavContainer">
  <a class="characterFade" href="#">
    <div class="fadeMe">Characters</div>
    <img class="characterLogo" src="https://openclipart.org/image/2400px/svg_to_png/103027/1293960051.png" alt="logo">
  </a>
</div>

.rightNavContainer {
  margin-top: 28px;
  width: 100%;
}

.rightNavContainer a {
  position: relative;
  margin-left: 25%;
  text-decoration: none;
  display: inline-block;
  /* 必须设置宽高，作为绝对定位的基准 */
  width: 160px;
  height: 60px;
}

.fadeMe {
  transition: opacity 0.3s ease;
  /* 先让文本居中，保持布局一致性 */
  text-align: center;
  line-height: 60px; /* 让文本垂直居中 */
}

.rightNavContainer a:hover .fadeMe {
  opacity: 0;
}

.characterLogo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
  max-width: 80%;
  max-height: 80%;
}

.rightNavContainer a:hover .characterLogo {
  opacity: 1;
}

关键说明 #

• 给<a>标签固定宽高，确保绝对定位的图片有明确的居中参考。
• 图片设置top/left/right/bottom: 0 + margin: auto，实现水平和垂直方向的自动居中。
• 文本用text-align: center和line-height提前居中，避免切换时布局跳动。

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