I am having trouble aligning the images in the center of the page without using fixed values for margins. Despite trying various pieces of code, I still cannot achieve the desired outcome. Below is the code snippet I have been working on:
.row_of_services {
display: flexbox;
place-items: center;
}
.row_image {
padding-top: 15px;
text-align: center;
display: inline-block;
width: 20%;
}
figure {
overflow: hidden;
margin: 0 10px;
border-radius: 25%;
}
<div class="row_of_services">
<div class="row_image">
<figure>
<img src="images/wedding1.jpg" alt="wedding services">
</figure>
<h3>At Weddings</h3>
<p>Start giving healthy products to newly wed</p>
</div>
<div class="row_image">
<figure>
<img src="images/wedding1.jpg" alt="wedding services">
</figure>
<h3>At Weddings</h3>
<p>Start giving healthy products to newly wed</p>
</div>
<div class="row_image">
<figure>
<img src="images/wedding1.jpg" alt="wedding services">
</figure>
<h3>At Weddings</h3>
<p>Start giving healthy products to newly wed</p>
</div>
</div>
Unfortunately, the output did not centralize the three images as intended. Here is the link to the result: https://codepen.io/gladwin-james/pen/dyOOpYe. Even after exploring solutions on Stack Overflow, I was unable to find a fix. Any assistance would be greatly appreciated.