styling CSS to achieve equal heights for div alignments

On my webpage, I have two sections that are not aligned in height or centered. How can I center these sections in the middle of the page with the same height alignment? One section is a profile section and the other contains photos of the profile, but they are currently not positioned exactly in the middle of the page.

<div class="container">

<div class="row  ">

    <!-- Mom Profile -->


    <div class="col-md-3 col-sm-12 py-6  ">
        <div class="card card-profile card-secondary">
            <div class="card-header" style="background-image: url(assets/img/blogpost.jpg)">

                <div class="profile-picture center-align">
                    <div class="avatar avatar-xl">
                        <img src="assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
                    </div>
                </div>
            </div>
            <div class="card-body  ">
                <div class="user-profile text-center">

                    <div class="desc">Ege</div>

                </div>
            </div>
            <div class="card-footer">
                <div class="row user-stats text-center">
                    <div class="col">
                        <div class="">125</div>
                        <div class="">Score</div>
                    </div>
                    <div class="col">
                        <div class="">25</div>
                        <div class="accordion-danger">Sell</div>
                    </div>
                    <div class="col">

                        <div class="">134</div>
                        <div class="">Meal</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Image Gallery -->
     

        <div   class="py-6 mt-5 col-md-9 col-sm-12">

            <div class="card">

                <div class="body">
                    <div id="aniimated-thumbnials" class="list-unstyled row clearfix">
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/1.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-1.jpg">
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/2.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-2.jpg">
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/3.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-3.jpg">
                            </a>
                        </div>



                    </div>
                </div>
            </div>
        </div>
   
    </div>

</div>

https://i.sstatic.net/XAlGY.jpg

htmlcssflexbox

Answer №1

If you examine the code below, you'll notice that all sections are centered and positioned in the middle of the page. Placeholder images have been included for your reference; make sure to replace them with appropriate images. Feel free to utilize the provided code to meet your specific requirements.

<section class="main d-flex align-items-center vh-100">
    <div class="container">
        <div class="row  ">
            <!-- Mom Profile -->
            <div class="   col-md-3 col-sm-12 py-6  ">
                <div class="card card-profile card-secondary">
                    <div class="card-header" style="background-image: url(assets/img/blogpost.jpg)">
                        <div class="profile-picture center-align">
                            <div class="avatar avatar-xl text-center">
                                <img src="https://picsum.photos/100/100" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </div>
                    </div>
                    <div class="card-body  ">
                        <div class="user-profile text-center">
                            <div class="desc">Ege</div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row user-stats text-center">
                            <div class="col">
                                <div class=" ">125</div>
                                <div class=" ">Score</div>
                            </div>
                            <div class="col">
                                <div class=" ">25</div>
                                <div class=" accordion-danger">Sell</div>
                            </div>
                            <div class="col">
                                <div class=" ">134</div>
                                <div class="">Meal</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Image Gallery -->
            <div class="py-6 col-md-9 col-sm-12">
                <div class="card h-100">
                    <div class="body h-100">
                        <div id="aniimated-thumbnials" class="list-unstyled row clearfix p-3 h-100">
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 overflow-hidden">
                                <a href="img/1.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail w-100 h-100" src="https://picsum.photos/300/150" alt="test">
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 overflow-hidden">
                                <a href="img/2.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail w-100 h-100" src="https://picsum.photos/300/150" alt="test">
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 overflow-hidden">
                                <a href="img/3.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail w-100 h-100" src="https://picsum.photos/300/150" alt="test">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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

What is the best method to "deactivate" a radio button while ensuring that a screen reader can still read the text and notify the user that it is inactive?

My current situation involves needing to deactivate certain radio buttons, while still having the option to reactivate them later. When I use the disabled attribute, screen readers will overlook this field and miss key information. I am seeking an accessi ...

javascripthtmlcssaccessibility

Transfer text from one form to a text field on a different website

I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...

javascripthtmltextfield

Ensuring maximum length validation on input

I am having an issue with the function "checkNumbers()". I am attempting to validate if my input does not exceed 10 numbers; while "isAllowedSymbol()" is functioning correctly, the other one is not. What could be causing this problem? function isAllowe ...

javascripthtmlcss

css3 perspective for text with a sleek appearance

I am currently facing a rather simple issue. I have a 3D container with text inside it, here is an example: .container{ transform: perspective(120px) rotateY(45deg); } <div class="container"> Lorem ipsum dolor sit amet consectetur adipisicing ...

htmlcssperspective

Troubleshooting IE's Compatibility Issue with Inline SVG as Background Image

My goal is to set the background-image CSS property to encoded data URI content, as demonstrated in this fiddle. Everything runs smoothly in all browsers I've tested, except for IE 9/10. For some reason, IE 9/10 doesn't display the contents. Ho ...

csssvgraphaelbackground-image

Having difficulties with hovering over a td that has a rowspan

I am encountering some challenges when attempting to hover over a td with rowspan in my HTML table. Despite searching for a solution, I have not been successful. I came across suggestions on forums that hinted at using JS/jQuery. Could someone please provi ...

htmlcsshtml-tablehover

Ways to add gaps between flexbox items within a single row?

I have a coding dilemma where I am trying to display two items in the same row with a 12px gap between them, but my current method is not working as desired. I want there to be space between the A's and B's without resorting to traditional techni ...

htmlcssflexbox

Tips for comparing URLs of the current active tab

Looking to create an adblocker specifically for a certain website. I have successfully implemented code that removes ads on the homepage, but it is still affecting other pages such as movie pages. This results in the deletion of the information section, i ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

javascripthtmlajaxlaravellaravel-blade

React application triggers `OnKeyDown` event just once

Hey there! I'm diving into the world of web development and could use some help. My current challenge involves manipulating input data based on key combinations like ctr + ArrowUp (increase) and ctr + ArrowDown (decrease). The dynamic part should be h ...

javascripthtmlreactjsonkeydownselection-api

Container element refusing to grow in size while the footer remains fixed on the screen

Description: I recently encountered an issue with the layout of my website. I have a main content div (#main) and a container div (.display), which should expand automatically with content to push the footer down. Initially, I struggled to get this workin ...

htmlcsspositioning

Is it possible to conceal the status bar in a web app designed for iOS 7?

Currently working on a project that involves creating an "add to home screen" game. I am looking for a way to hide the status bar completely, including the time and battery indicators. I know it is possible to change the color of the status bar, but can it ...

htmliphone-web-app

Developing a Chrome browser extension tailored for parsing unique file formats

Currently, I am working on developing a compiler for a unique conditional formatting language. My aim is to enable the capability of opening files in my language directly in Chrome by simply double-clicking on them in File Explorer (I am currently using Wi ...

javascripthtmlgoogle-chrome-extensionfile-extension

JavaScript Summation Calculation

I am currently working on calculating the sum of three scores and displaying the total as "Total:". However, I am facing an issue in dynamically updating the total whenever a score value changes. Is there a way to utilize the "onchange" event to achieve th ...

javascripthtml

Having trouble incorporating transitions into the hover effect

Currently, I am working on a project using React and Tailwindcss. The issue I am facing involves creating a card with shadowed text that only appears when hovered over an image. I want to make the hover effect smoother by adding a transition class, but I a ...

cssreactjstailwind-css

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

javascriptjqueryhtmlcssparallax

Injecting a variety of wallpapers dynamically using css and html

As a beginner in CSS, HTML, and coding in general, I am currently working on creating my own start page with a local path that loads my bookmarks using an HTML file. The background-image control is handled by the style.css file. I have researched ways to c ...

phphtmlcssimagerandom

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

cssasp.net-mvcbootstrap-4

Use the Segoe UI typeface on Internet Explorer for a sleek

I have implemented a custom Segoe UI font in my CSS file. While it displays correctly in Chrome, I am facing an issue where IE and Firefox are showing the default font in certain areas. Below is the snippet of the CSS code: body { margin:0px auto; ...

htmlcssfontsfont-face

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss