1

Как разместить изображение по центру страницы (центровка по обеим осям)? Прочел множество тем, но в итоге смог изображение отцентрировать только по горизонтали.

Выглядит пока так:

.image-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="image-flex">
  <a class="js-button" href="https://www.google.ru/"><img src="var1.jpg" onclick='this.src="var2.jpg"' height="480" width="854"></a>
</div>

2 ответа 2

4

Содержимое центруется относительно родителя. А в вашем случае, его высота равнавысоте картинки.

Если задать высоту больше чем высота картинки, то увидим как картинка встала по центру блока

.image-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}
<div class="image-flex">
  <a class="js-button" href="https://www.google.ru/"><img src="https://via.placeholder.com/150" onclick='this.src="var2.jpg"' height="150" width="150"></a>
</div>

1
  • Спасибо, буду знать на будущее!
    – Beatus
    18 сен 2020 в 14:41
0

В class напиши left и количество пикселей чтобы он был посередине

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.