如何在不使用CSS移动文本的情况下相对于文本定位图像？

Question

我在div中有一个h3标头。我想相对于h3标头（在其右侧）放置一个小图像。我忘记了这样做的适当方法。使用新代码，它不会相对于标题定位，因此，如果页面是动态的并且内容较小或较大，则图像不会相应定位。在不移动H3标头的情况下也如何做到这一点？

原始html和CSS

<div class="stages">
  <h3>Stages</h3>
</div>

// CSS
.stages {
  padding-left: 60px;
  padding-right: 60px;
}

新代码

<div class="stages">
  <div class="graphicon">
  <h3>Stages</h3> <a href="#"><img src="img.png"></a>
  </div>
</div>


// UPDATED
.stages {
  padding-left: 60px;
  padding-right: 60px;
}

.graphicon {
  width:30px;
  position: absolute;
  top: 517px;
  left: 155px;
}

Answer 1

这是因为您正在使用：

position: absolute;

您可能想使用：

position: relative;

有很多资源可用于了解如何放置html元素：

https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

Answer 2

尝试一下：

<div class="stages">
   <div class="graphicon">
      <h3>Stages</h3> <a href="#"><img src="img.png"></a>
   </div>
</div>

---

h3{
  display:inline-block;
}

https://jsfiddle.net/39j2tbha/

Answer 3

我通常使用Flexbox进行此操作：

<h3>
  Stages
  <img src="img.png" />
</h3>

在您的CSS中：

h3 {
  display: flex;
  align-items: center;
}

h3 img {
  margin: 0 0.5em;
  height: 1.5em;
}

此处的示例：https://jsfiddle.net/thec8n0f/

这使定位更加容易。我也在这里使用em来确保大小与字体大小有关。