将文字垂直居中对齐-图片顶部？

Question

我想在位置中心的图像上输入文字。 像这样：

     TEXT    
---------------
-             -
-    IMAGE    -
-             -
---------------

我的HMTL代码如下：

 <a href="https://hippoxd.sharengay.com"> <span>Share Ngay</span> <img src="https://sharengay.com/wp-content/uploads/2018/10/forum-moi-cua-sharengay.png"> </a> 

Answer 1

您可以使用CSS执行此操作

 .main { width: 100px } .main a span { display: block; text-align: center; margin-bottom: 10px; } 

 <div class="main"> <a href="https://hippoxd.sharengay.com"> <span>Share Ngay</span> <img src="https://sharengay.com/wp-content/uploads/2018/10/forum-moi-cua-sharengay.png"> </a> </div> 

Answer 2

尝试这个 ..

 a span { display: block; } 

 <a href="https://hippoxd.sharengay.com"> <span>Share Ngay</span> <img src="https://sharengay.com/wp-content/uploads/2018/10/forum-moi-cua-sharengay.png"> </a> 

Answer 3

尝试使用div和text-align: center

 <a href="https://hippoxd.sharengay.com"> <div style="text-align: center">Share Ngay</div> <div style="text-align: center"><img src="https://www.w3schools.com/html/img_girl.jpg"></div> </a> 

Answer 4

 a { position: relative; display: block; margin-top: 30px; } span { position: absolute; margin-top: -15px; } 

 <a href="https://hippoxd.sharengay.com"> <span>Share Ngay</span> <img src="https://sharengay.com/wp-content/uploads/2018/10/forum-moi-cua-sharengay.png"> </a> 

检查这个

Answer 5

尝试以下CSS。

a{
  display: inline-block;
  position: relative;
 }

 span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
 }

但是，如果您想变得更优雅。 尝试使用HTML5中的 <figure>和<figcaption>

将此用作参考： https : //css-tricks.com/centering-css-complete-guide/