在圖像頂部垂直對齊中間和居中的文本

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>

演示-https: //jsfiddle.net/squidraj/zkno1sc2/

是否因為我未在父div中指定圖像的寬度？

非常感謝您的幫助。

Answer 1

您可以將display: flex在.hero-image上與align-items: center; ：

 .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>