Center the content of the page by adjusting the graphical source with HTML and CSS (SCSS) to align perfectly in the middle

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.

Answer №1

Your current flex settings are incorrect (

display: flexbox; place-items: center;
). The correct way to set it up is:

.row_of_services{
    display: flex;
    justify-content: center;
}

Answer №2

Update the initial SCSS block with the following code:

.row_of_services{
    display: flex;
    align-content: center;
    justify-content: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Twitter widget functions properly upon initial loading, but subsequently malfunctions

I have a web application built using the Play Framework that utilizes Ajax to load view html pages into a 'container' div. $( "#container" ).load("/contactUs"); // The contactUs page contains the widget In one of my html pages, I include a Twit ...

Image is overlaid by Dropdown Menu

Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

Utilizing a random string generator and MySQL for email validation purposes

I recently encountered an issue with my email verification code. I have been attempting to send users a unique passcode ID for login purposes, in addition to their username and password. To generate the passcode, I used a random string key generator: < ...

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

Updating the content within a div following the submission of a contact form 7

I'm struggling with my contact form. I want the content of my contact form div to change after clicking submit on the form. I've been searching for a solution, but so far, no luck. Here is what I have: Form (div1) with input fields, acceptance c ...

Send the selected option from the dropdown menu to a different page

I am in the process of designing a unique shopping cart system where, upon clicking on the "add to cart" link, both the selected quantity from the drop-down menu and the product ID are transmitted to the addCart page. While I have successfully managed to p ...

``There seems to be a problem with the margins within a flex container

Can someone assist with fixing a bug related to the .half-img2 element's margin-top property? It is necessary for the heights of these two images to be equal to that of the main image. Here are the links for reference: http://prntscr.com/9 ...

The function Document.Open() is not functioning correctly

As I work on my webpage, I am having an issue with a button. This button should notify the user if their username and password are correct, and then redirect them to another page. However, while the notification works fine, the redirection does not happen ...

Make text come to life as the user scrolls across a fixed positioned div

As the user scrolls, I am attempting to animate four headings. First, I create a sticky positioned div. Then, as the user scrolls over the headings, each one toggles the class .active sequentially, with the last one remaining visible and the scrolling cont ...

Stopping JavaScript from executing upon the loading of new content with Ajax - a comprehensive guide

During the development of a website, I have implemented Ajax to load content dynamically along with the necessary JavaScript. The reason behind this choice is that all pages share the same layout but have different content. An issue I encountered was that ...

Attempting to execute Gulp 4 in order to convert SCSS files into CSS

After attempting to run Gulp to convert SCSS to CSS, the process appeared to be successful without any errors. However, I encountered a problem where no CSS files were generated in the target folder. I even tried changing the output path, but the issue per ...

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

What could be the reason for my div not selecting the button?

I'm encountering an issue with the animation of my button that I believe is related to targeting. My goal is to trigger the animation whenever I hover over the div containing the button: .homePageDiv:hover>.homePageButton { animation: pulsingBut ...

Issue encountered while submitting form via ajax

Hey there, I'm having some trouble getting my form to submit. I've set up an ajax form to save the data in my database. If you want to check out the site for yourself, here's the link: Let me show you the script code: <script> $( ...

When clicked, elevate the element to the top of the window with an offset

Is there a way to click on this button, which is located within an accordion section header, and have it automatically move to the top of the page based on the window size? It seems like it should be a simple task, but sometimes after a long day things ca ...

What is the best way to position a Show/Hide toggle button next to a header, rather than placing it below the header?

I created a toggle button and attempted to style it so it aligns next to a header or a short paragraph. Despite my best efforts with CSS, the button consistently remains below the header. How can I make it appear alongside the header instead? .HTML: < ...

Steps to center an HTML canvas on the screen

I attempted to center my canvas horizontally using <div style="text-align:center;">, but the y axis remains unchanged. How can I position the HTML canvas in the center of both the x and y axes? Any suggestions on how to achieve this alignm ...

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

Limiting the display of every item in Angular ngFor

I'm currently working with Angular and I have the following code in my component.html: <div class="card" *ngFor="let item of galleries;" (mouseenter)=" setBackground(item?.image?.fullpath)" (mouseover)="showCount ...