html - 在图像上水平和垂直居中文本框

Question

我正在尝试制作一个博客设计，我想在垂直和水平居中的图像上显示文本。我的 CSS 类 .featured-article 有相对位置。这是 HTML 和 CSS:

<div class="featured-article">
  <img src="images/Image.png" alt="Image"> <!-- This Works Perfect, I don't need to touch it anymore -->
    <div class="article">
      <img src="uploads/4.png" alt="Image"> <!-- Image where I need to add TextBox -->
      <div class="title"> <!-- TextBox that I need to center on image -->
        <span><strong>TEXT</strong> TEXT</span>
      </div>
      .......... Other Eelements
      .......... Other Eelements
      .......... Other Elements

CSS:

.featured-article { /* Container of Post */
  position: relative;
  margin-top: 60px;
}

.featured-article > img { /* Background Image, This Works Perfect */
  position: absolute;
  top: -150px;
  left: 20px;
  z-index: -1;
}

.featured-article > .article > img { /* Image where I need to add TextBox */
  width: 100%;
}

.featured-article > .article > .title > span { /* TextBox that I need to center on image */
  background-color: #9ED7D8;
  padding: 25px 35px 25px 35px;
  text-transform: uppercase;
  max-width: 800px;
  font-size: 30px;
  font-weight: 300;
  color: #FFF;
}

这应该是这样的:Example .

Answer 1

您可以为您的父元素使用 css 属性 background-image，并将您的文本放入子元素中。 之后有很多方法可以将 child 定位在父元素的中心......

一种方式是这样的:

html:

<div class="parent">
    <div class="child">
        your text
    </div>
</div>

和CSS:

.parent{
    background-image: url("images/Image.png");
    height:...;
    width:...;
}
.child{
    position: absolute;
    top: ....;
    width: 100%;
    text-align: center;
}