I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to have the middle image centered with the other two images placed evenly on either side of it.
<!DOCTYPE html>
<html>
<head>
<title>Anchor</title>
<link rel="stylesheet" href="main.css" type="text/css"/>
</head>
<body>
<div id="page">
<div id="header">
<h1 id="fhead">Used Clothes, Toys, and Miscellaneous Items</h1>
<p> Choose from the three items below</p>
</div>
<div id="body">
<figure id="pic1">
<a href="Pages/clothes.html"><img src="Images/faker.jpg" height="" width="" alt="Clothes"></a>
<figcaption>Click picture to browse clothes</figcaption>
</figure>
<figure id="pic2">
<a href="Pages/toys.html"><img src="Images/faker.jpg" height="" width="" alt="Toy"></a>
<figcaption>Click picture to browse clothes</figcaption>
</figure>
<figure id="pic3">
<a href="Pages/miscellaneous.html">]
<img src="Images/faker.jpg" height="" width="" alt="Misc">
</a>
<figcaption>Click picture to browse clothes</figcaption>
</figure>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Here is the css:
#body {
position: relative;
width: 95%;
}
figure {
float: left;
text-decoration: none;
}
#pic3 {
position: absolute;
right: 0;
clear: left;
}
figcaption {
border: 1px solid red;
border-radius: 10px;
padding: 10px;
}
Despite having aligned the images horizontally, I have not been able to achieve the desired centering effect. My main objective is to center the middle image while evenly spacing the other two images on either side.