I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner.
Below is the HTML5 markup:
<main class="main-content">
<div class="item">
<a href="Products/groceries-pets/Fruits-Package.html">
<img
src="./Images/Products/groceries-pets/fruits-package.jpg"
class="img-content"
/>
</a>
<br />
<div>
<p href="Products/groceries-pets/Fruits-Package.html" class="desc">
<strong>Fruit Package</strong> <em> P1200 </em>
</p>
</div>
</div>
<div class="item">
<a href="products/home-living/Indoor-Plant.html">
<img
src="./Images/products/home-living/indoor-plant.jpg"
class="img-content"
/>
</a>
<br />
<div>
<p href="products/home-living/Indoor-Plant.html" class="desc">
<strong>Indoor Plant</strong> <em> P300 </em>
</p>
</div>
</div>
<div class="item">
<a href="Products/babies-toys/Baby-Cars.html">
<img
src="./Images/Products/babies-toys/baby-cars.jpg"
class="img-content"
/>
</a>
<br />
<div>
<p href="Products/babies-toys/Baby-Cars.html" class="desc">
<strong>Baby Cars</strong> <em> P150 </em>
</p>
</div>
</div>
<div class="item">
<a href="Products/fashion/Black-Shirt.html">
<img
src="./Images/Products/fashion/black-shirt.jpg"
class="img-content"
/>
</a>
<br />
<div>
<p href="Products/fashion/Black-Shirt.html" class="desc">
<strong>Black Shirt</strong> <em> P400 </em>
</p>
</div>
</div>
</main>
Here is my CSS:
.main-content {
background-color: rgb(219, 95, 95);
height: 340px;
width: 95%;
margin: 140px auto 0;
text-align: center;
}
.item {
float: left;
}
.img-content {
width: 200px;
height: 200px;
padding: 10px;
margin: 30px -200px 0px 200px;
object-fit: cover;
}
.desc {
text-align: center;
}