@viktorulyushev

Сделать кнопку по центру блока?

Есть примерно такая структура
<div class="block">
   <img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
   <a href="#">
         <span class="block1">Читать</span>
   </a>
</div>

и вот нужно сделать чтобы кнопка читать была по центру блока block,и картинка центрировалась в блоке
  • Вопрос задан
  • 738 просмотров
Решения вопроса 1
@viktorulyushev Автор вопроса
Вот так получилось как мне надо,может кому пригодится,если что не правильно поправьте

https://jsfiddle.net/gpttfL22/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
qork
@qork
{ background: #F00B42 }
.block{
  position: relative;
  display: inline-block;
}
.block a{
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Ответ написан
HamSter007
@HamSter007
HTML/CSS верстальщик
html:
<div class="block">
   <img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
   <a href="#">
     <span class="block1">Читать</span>
   </a>
</div>


Вариант 1:

img,
a {
  display: block;
  margin: 0 auto;
  text-align: center;
}


Вариант 2:

img {
  display: block;
  margin: 0 auto;
}

.block {
  text-align: center;
}


Вариант 3:

.block {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}


...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы