How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services.

In the photo provided, you can see that the left box is too close to the parent div.

.services {
    background-color: lightblue;
    display: flex;
    height: 60vh;
    width: 90%;
    margin: auto;
    align-items: center;
    text-align: center;
}
.qm {
    flex: 1;
    position: absolute;
    width: 277px;
    height: 316px;
    left: 86px;
    top: 1037px;
    background: #3C3664;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
}
.audit {
    flex: 1;
    position: absolute;
    width: 276px;
    height: 316px;
    left: 582px;
    top: 1037px;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}
.pm {
    flex: 1;
    position: absolute;
    width: 276px;
    height: 316px;
    left: 1077px;
    top: 1037px;

    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    float: right;
}
<div class="services">
            <!-- Quality Management -->
            <div class="qm">
                <h1>
                    Quality Management
                </h1>
            </div>
            <!-- Auditing -->
            <div class="audit">
                <h1>
                    Auditing
                </h1>
            </div>
            <!-- Project Management -->
            <div class="pm">
                <h1>
                    Project Management
                </h1>
            </div>
        </div>

https://i.stack.imgur.com/wy7DE.png

htmlcss

Answer №1

Here is a solution for you: make sure to handle the child elements within the parent flexbox context.

.services {
    background-color: lightblue;
    display: flex;
    height: 70vh;
    width: 90%;
    margin: auto;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
}

.qm {
    height: 70%;
    background: #3C3664;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

.audit {
    height: 70%;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

.pm {
    height: 70%;
    background: #FFFFFF;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 20%;
}

h1 {
    word-break: break-word;
    font-size: large;
}
<div class="services">
<!-- Quality Management -->
<div class="qm">
<h1>
Quality Management
</h1>
</div>
<!-- Auditing -->
<div class="audit">
<h1>
Auditing
</h1>
</div>
<!-- Project Management -->
<div class="pm">
<h1>
Project Management
</h1>
</div>
</div>

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

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...

javascriptjqueryhtml

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

What is the method for embedding HTML content into the header section of tcpdf?

I am currently utilizing the tcpdf library to create a PDF document. I have implemented the smarty template engine to manage the data. Below is the code snippet for inserting header data: // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, ...

phphtmlsmartytcpdf

A PHP script or regular expression that swaps the positions of characters within a string

(Update1: per suggestion by George Cummins) I need assistance in creating a regex search and replace or a php function to switch positions of characters within a string. (since I couldn't figure it out on my own) For example, if I have the following C ...

phpcssregex

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Retrieving text content from the h1 element's class name

Trying to extract the text 'getthis' using the agility pack. <h1 class="point">getthis< span class="level">Niveau 0</span> </h1> Tried methods: var links = webBrowser1.Document.GetElementsByTagName("point"); foreach ...

c#htmlhtml-agility-pack

There seems to be an issue with the functionality of Angular Material in Angular9

I've encountered an issue with the material form field, even after importing the necessary modules. Surprisingly, there are no console errors to provide more insight into the problem. { "name": "online-shop", "version": "0.0.0", "scripts": ...

htmlangularangular-materialhtml5-canvasangular9

Create a variable and set it equal to the value of a form

I'm having trouble setting a value to a hidden form field that needs to come from a query string parameter. The function that extracts the query string parameter is working properly, but the function that assigns this variable to the hidden form field ...

javascripthtmlforms

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

javascriptjqueryhtmlajax

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

What is the procedure for eliminating an event listener that does not directly invoke a function?

I have implemented an event listener in my JS file following a successful AJAX request: var pageButtonsParentElement = document.getElementById("page-buttons"); pageButtonsParentElement.addEventListener('click', event => { ...

javascripthtmljqueryajax

Display an empty string when a value is NULL using jQuery's .append() function

To set an HTML value using the .append() function, I need to include AJAX data values. If the data set contains a null value, it will show as 'null' in the UI. I want to remove that 'null' and display it as blank. However, I can't ...

javascripthtmljqueryajax

How to display logged-in user information on the homepage

Code for multiuser login $scope.users = [ {uname: 'fida', password: 'fida', age:26, department:"science"}, {uname: 'anu', password: 'anu', age:23,department:"maths"}, {uname: 'nida&apo ...

htmlangularjs

Employ the v-model directive in conjunction with a checkbox in scenarios where v-for is implemented with the properties of an object

When utilizing v-model with a checkbox in conjunction with an array of objects, it functions correctly: new Vue({ el: '#example', data: { names: [ { name: 'jack', checked: true }, { name: 'john', checked ...

javascripthtmlvue.jsvuejs2

Troubleshooting issues with custom Bootstrap CSS implementation

I've been working on a website using Twitter Bootstrap and I wanted to add an interesting dynamic where an image starts off as grayscale and then transitions to full color when hovered over. Instead of modifying the Bootstrap.css, I decided to create ...

csstwitter-bootstrap

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Customize dynamically loaded data via AJAX

I have a webpage that is loading a table from another source. The CSS is working fine, but I am facing an issue editing the table using jQuery when it's loaded dynamically through a script. It seems like my changes are not getting applied because they ...

javascriptjqueryhtmlajax

What can be done to address the problem of background-image opacity making text difficult to read?

I am having an issue with the background. I am aiming for something similar to what is shown in screenshot 1, but instead, I am getting the result shown in screenshot 2. Where could the problem lie? html, body, .bg-for-1 { height: 100%; } .bg-for-1 ...

cssbackground-imageopacity

AngularJS - Changing Views with Templates

At the moment, I am changing my directives in the following manner. Within my directive: (function(){ 'use strict'; var controller = ['$scope', function ($scope) { }]; angular .module('moduleName' ...

phphtmlangularjsangularjs-directive

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document

[ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] Hello there! The function getArray() in the code snippet above is returning the specified string ↑. I need help connecting this data w ...

javascripthtmlgoogle-apps-scriptgoogle-sheets