Выровнять текст по вертикали по центру - вверху изображения?

Я хочу, чтобы текст на изображении находился в центре позиции. Нравится:

     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>

попробуйте этот a span { display: block; }

Yaseen Ahmad 26.10.2018 06:57
1
1
58
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Вы можете сделать это с помощью 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>

попробуй это ..

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>

Попробуйте использовать 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>

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>

Отметьте это

Попробуйте следующий CSS.

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

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

Но если хотите быть изящнее. Попробуйте <figure> и <figcaption> от HTML5

Используйте это как ссылку: https://css-tricks.com/centering-css-complete-guide/

Другие вопросы по теме