Как разместить изображения по центру?

Question

[Anatolievna]

Comments

[Сергей delphinpro]

https://yandex.ru/search/?text=способы+центрирован...

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

Answer 1

[Илья Петров]

Можно так:
• карточка фиксированной высоты,
• изображение абсолютное, z-index минимальный

.card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 320px;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	transform: translateZ(0);
}

/* размеры изображения задайте самостоятельно */
.card__image {
	width: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
}

.card__image img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.card__title {
	z-index: 2;
}

.card__price {
	z-index: 2;
}

Comments

[Ankhena]

Какие еще абсолюты для этой задачи? Да еще и фикс высота у карточки. С ума сойти.

Answer 2

[MegaEdwards]

Все просто, в начале и конце поставьте тэги центра
<center> Ссылка на изображение </center>

Comments

[Сергей delphinpro]

https://developer.mozilla.org/en-US/docs/Web/HTML/...
Обратите внимание на красную плашку

[Одиночка Айс]

Лол...