在文本的中心-图像顶部垂直对齐吗？

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/