Верстка карточки товара

Рейтинг: 0Ответов: 1Опубликовано: 23.03.2023

Ребят в чем проблема?

Пытаюсь сверстать карточку товара по макету. В итоге не могу центрировать по вертикали изображение внутри блока.

Верхний значек процентов я оформил, его дает центровать только когда он в inline-block.

Картинка всегда пришита к верху, не могу опустить ее вниз.

.single-card {
  align-items: center;
  justify-content: center;
  background: #C0C0C0;
  border-radius: 20px;
  width: 290px;
  height: 387px;
}

.sale-percent {
  background: orange;
  display: inline-block;
  align-item: right;
}
<div class="container">
  <div class="single-card">
    <div class="sale-percent">-30%</div>
    <div class="card-img">
      <img src="..." class="item-image">
    </div>
  </div>
</div>

Нужно сделать такую карточку

введите сюда описание изображения

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 0

Процент позиционируем absolute-ом, а изображение в данном случае красный прямоугольник центрируем через flex.

.single-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C0C0C0;
  border-radius: 20px;
  width: 290px;
  height: 387px;
  position: relative;
  padding: 15px;
}

.sale-percent {
  background: orange;
  padding: 3px 10px;
  border-radius: 50px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.card-img {
  display: block;
  width: 100%;
}
.card-img img {
  max-width: 100%;
  height: auto;
  width: 100%;
  display: block;
  background: red;
}
<div class="container">
  <div class="single-card">
    <div class="sale-percent">-30%</div>
    <div class="card-img">
      <img src="..." class="item-image" width="300" height="160">
    </div>
  </div>
</div>