-1

I am unable to align the images to the center of the page ,I dont want to give a fixed values(margin) to place the images at the centre of the page, this is the piece of code I wrote but I am unable to centre the images.(I have also provided the link below for clear explanation)

.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>

this is the output I have received but I am unable to center those three images: https://codepen.io/gladwin-james/pen/dyOOpYe. I have also tried other answers from stackoverflow but I couldnt find this. Please help.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Gladwin James
  • 563
  • 3
  • 10
  • 22

2 Answers2

1

Change your first block of SCSS to :

.row_of_services{
    display: flex;
    align-content: center;
    justify-content: center;
}
mah111
  • 146
  • 8
  • Hi @mah111 thankyou so much this worked as well, can you please take a look at this link please? https://codepen.io/gladwin-james/pen/dyOOpYe the alignment gets off when I added a width and height to the image – Gladwin James Feb 11 '21 at 14:32
1

You are using the wrong expressions for your flex settings (display: flexbox; place-items: center;). It has to be:

.row_of_services{
    display: flex;
    justify-content: center;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Johannes Thankyou so much this really worked but when I added a widht and height to .figure{} the alignment goes off, like this codepen.io/gladwin-james/pen/dyOOpYe can you help with this please? – Gladwin James Feb 11 '21 at 14:25
  • 1
    Erase the `margin-left` and add `margin: 0 auto;` on those `figure` tags to center them horizontally in their containers. – Johannes Feb 11 '21 at 15:38