html - 如何让文字在图片上居中？

Question

我试图将文本置于横幅图像的中心。

这是它的一个 jsfiddle。

https://jsfiddle.net/c6Lcr0ap/

HTML:

<div class="about-me">
  <div class="about-me__banner">

    <div class="about-me__banner-text">
      <h3>About Me</h3>
    </div>

    <div class="about-me__banner-image">
      <img src="https://i.imgur.com/qiUWxdd.png">
    </div>

  </div>
</div>

CSS:

h3 {
  color: orange;
}

Answer 1

.about-me__banner{
  position:relative;
  text-align:center;
}
.about-me__banner-text{
  position:absolute;
  width:100%;
  color: orange;
}

<div class="about-me">
    <div class="about-me__banner">
        <div class="about-me__banner-text">
            <h3>About Me</h3>
        </div>
        <div class="about-me__banner-image">
            <img src="https://i.imgur.com/qiUWxdd.png">
        </div>
    </div>
</div>