Подскажите новичку, как сделать так чтобы фото товара располагалось внутри дива по центру? Другими словами фото товара слева а описание к этому товару справа. Хотелось бы разместить фото по центру внутри родительского дива. Спасибо.
.card {
margin: 0 15px;
display: flex;
height: 500px;
justify-content: center;
align-items: center;
border: solid 1px red;
border-radius: 15px;
position: relative;
}
.card__item-img img {
/* background-color: #fff; */
min-height: 100%;
min-width: 100%;
border-radius: 25px;
}
.card img {
height: 100%;
width: 100%;
border-radius: 15px;
}
.card__item-container {
display: flex;
height: 100%;
max-width: 30%;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
background-color: #fff;
border-radius: 15px;
}
.card__item-title {
font-size: 2rem;
font-weight: bold;
}
.card__item-text {
margin: 0 25px;
max-width: 65%;
font-size: 1.1rem;
text-align: justify;
letter-spacing: 2px;
}
.card__item-btn {
width: 200px;
height: 50px;
background-color: rgb(23, 215, 80);
border-radius: 25px;
}
<div class="card">
<div class="card__item-img"><img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" alt="img"></div>
<div class="card__item-container">
<h2 class="card__item-title">Joystick</h2>
<p class="card__item-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde nisi vel accusamus necessitatibus quas illocupiditate nobis nostrum? Consectetur, in. Expedita ut, labore sapienteculpa excepturi repellendus provident magnam laboriosam, cupiditateobcaecati
voluptatibus saepe, autem iste perspiciatis sit! Libero ullamiure hic expedita dignissimos sapiente laboriosam eius ipsa, aliquiddeleniti?.</p>
<button class="card__item-btn" type="submit">BUY</button>
</div>
</div>