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用于您的父元素，并在其中将您的文本放在子元素中。之后，有很多方法可以将孩子定位在父元素的中心......

一种方式是这样的：

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

在图像上水平和垂直居中TextBox

1 个答案: