圖像上的Horizo​​ntaly和Verticaly中心文本框

Question

我正在嘗試製作一個博客設計，並且我想在verticaly和horizo​​ntaly居中的圖像上顯示文本。我的CSS類.featured文章有相對位置。這是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; 
}