イメージの上に縦と中央のテキストを配置する

Question

イメージの上にテキストを配置しようとしています。しかし誰も働いていないようだ。

私のhtmlがある

<div class="hero-image"> 
    <img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt=""> 
    <a href=""><h2>Some Sample text</h2></a> 
</div> 

デモ - 私は、親のdivで画像の幅を指定するわけではないので、それhttps://jsfiddle.net/squidraj/zkno1sc2/

ですか？

ご協力いただきまして誠にありがとうございます。

Answer 1

あなたは​​との組み合わせで.hero-imageにdisplay: flexを使用することができます。

.hero-image { 
 
    display: flex; 
 
    position: relative; 
 
    align-items: center; 
 
} 
 
.hero-image img{ 
 
    width: 100%; 
 
} 
 

 
.hero-image h2 { 
 
    background: #ff2bff none repeat scroll 0 0; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 200px; 
 
    margin: 0px auto; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
}

<div class="hero-image"> 
 
    <img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt=""> 
 
    <a href=""><h2>Some Sample text</h2></a> 
 
</div>

Answer 2

"トップ" のパディングを行い、コードを参照してください：

.hero-image { 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.hero-image a { 
 
    background: #ff2bff none repeat scroll 0 0; 
 
    color: #fff; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    top: 45%; 
 
    width: 200px; 
 
    bottom: 0; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    margin: 0px auto; 
 
    height: 50px 
 
}

<div class="hero-image"> 
 
    <img src="https://s23.postimg.org/ahcg75tsb/hero.png" alt=""> 
 
    <a href=""><h2>Some Sample text</h2></a> 
 
</div>

を