Question

我在下面编写的当前代码淡出文本，而是显示图像..

HTML

<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>

CSS

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

.rightNavContainer a {
  position: relative;
  margin-left:25%;
  text-decoration: none;
  color: black;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.fadeMe {
  position: relative;
  margin-left:25%;
}

.rightNavContainer .characterFade .fadeMe {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.rightNavContainer .characterFade .fadeMe:hover {
  opacity: 0.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}

.characterLogo {
  height: 1em;
  width: 1em;
  display: none;
  position: relative;
  margin-top: -1em;
  margin-left: 10.6em;
}

.rightNavContainer .characterFade .fadeMe:hover ~ .characterLogo {
  display: block;
  -webkit-animation: fadein 3s;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

这是小提琴.. https://jsfiddle.net/m8pa9u1k/23/

这个问题是我已经硬编码了左边距：10.6em;里面.characterLogo现在把图像放在中心，但如果我要更改屏幕尺寸，图像就不再位于中心。有没有办法始终将图像保持在链接标记characterFade的中心？又基于父类的中心？

Answer 1

尝试修改你的小提琴：

.rightNavContainer a {
  position: relative;
  margin-left:25%;
  text-decoration: none;
  color: black;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
  display: inline-block;
}

.characterLogo {
  height: 1em;
  width: 1em;
  display: none;
  position: relative;
  margin: 0 auto;
  top: -1em;
}

https://jsfiddle.net/m8pa9u1k/30/

设置margin: 0 auto;为顶部和底部边距设置0，但浏览器会自动选择左侧和右侧的边距。它是使一些元素居中的常用技术。

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

看到您正在使用相对定位，我已删除-1em上边距并将其替换为top: -1em。我认为它的意图更清楚了。

此外，a的宽度为全宽，因为div是块元素。将其更改为inline-block会导致浏览器根据其实际内容计算宽度。在这里使用span可能更好，因为它是一个内联元素，更适合其他内联元素的内容。

如果我的答案中有些内容不清楚，请告诉我。

父级是链接时，基于父级的中心图像

1 个答案: