html - 图片内的文字

Question

我只想像这样在图像中添加我的 h2 文本和小段落。

当我添加 h1 和文本时，它位于图像下方。

这是因为错误的 css 定位吗？

这是我的代码

<div className="committeeBackground">
                  <img src="/images/conference.jpg" alt=""/>
                  <h1>Who</h1>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                  </p>
                </div>

.committeeBackground{
img{
  width: 100%;
 }
}

Answer 1

这样做，使用 flex 居中，使用 position: absolute 居中<​​/p>

.wrapper {
  position: relative;
  display: inline-block;
}
.ontop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ontop > div {
  text-align: center;
  color: white;
  font-size: 24px;
}

<div class="wrapper">
  <img src="http://lorempixel.com/400/300/animals/6" alt="">
  <div class="ontop">
    <div>
      <h2>Test Text</h2>
      <p><i>Dummy Text Under H2</i></p>
    </div>
  </div>
</div>