Is there a way to perfectly align the content at the center of the section?

I'm trying to ensure that the content in each section is centered. What is the correct way to achieve this? Should I focus on the containers/rows for alignment? I have tried placing the alignment properties in different elements (section, container, row) but nothing seems to work.

.content {
    height: 100vh;
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b263b25387479657d7424">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
    </head>
    <body>
            <section class="content" style="background-color: lightgreen;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center text-lg-start">
                        <h1>heading</h1>
                        <p>test</p>
                    </div>
    
                    <div class="col-lg-6">
                        <img src="https://via.placeholder.com/200/09f/fff.png" />
                    </div>
                </div>
            </div>
        </section>

        <section class="content" style="background-color: moccasin;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 mx-auto col-lg-5">
                        <h1>heading</h1>
                        <p>test</p>
                    </div>
    
                    <div class="col-lg-6">
                        <img src="https://via.placeholder.com/200/09f/fff.png" />
                    </div>
                </div>
            </div>
        </section>
                <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f213c707d61797020">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

using bootstrap v5.3.0-alpha1

edit: clarified question

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1>
<title>Sample Page</title>

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660409091215121407162653485548564b070a160e0757">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container">
<div class="row align-items-center">
    <div class="col-lg-6 text-center text-lg-start">
        <h1>My Heading</h1>
        <p>This is a test</p>
    </div>

    <div class="col-lg-6">
        <img src="https://via.placeholder.com/500/09f/fff.png" />
    </div>
</div>
</div>
</section>

<section class="content" style="background-color: moccasin;">
<div class="container">
<div class="row justify-center text-center">
    <div class="col-lg-10 mx-auto col-lg-5">
        <h1>Another Heading</h1>
        <p>Another test example</p>
    </div>

    <div class="col-lg-6 m-auto">
        <img src="https://via.placeholder.com/500/09f/fff.png" />
    </div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dec3ddc08c819d858cdc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</body>
</html >

Answer №2

Upon reviewing your snippet, I noticed that the section height is set to 100vh and the image height exceeds it, causing overlap with other sections. To prevent this overlapping, you should adjust the section's height to be greater than that of the image or remove the inline height from the content class applied on the section. Additionally, to align the section content in the middle, you can use the text-center class with the content or container class, otherwise, you will need to apply it individually to each element.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1ecf1eff2beb3afb7beee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
    </head>
    <body>
            <section class="content" style="background-color: lightgreen;">
            <div class="container text-center">
                <div class="row">
                    <div class="col-lg-6 text-lg-start">
                        <h1>heading</h1>
                        <p>test</p>
                    </div>
    
                    <div class="col-lg-6">
                        <img src="https://via.placeholder.com/500/09f/fff.png" />
                    </div>
                </div>
            </div>
        </section>

        <section class="content" style="background-color: moccasin;">
            <div class="container text-center">
                <div class="row">
                    <div class="col-lg-10  mx-auto col-lg-5">
                        <h1>heading</h1>
                        <p>test</p>
                    </div>
    
                    <div class="col-lg-6">
                        <img src="https://via.placeholder.com/500/09f/fff.png" />
                    </div>
                </div>
            </div>
        </section>
                <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74161b1b00070006150434415a475a44591518041c1545">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

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

Saving downloaded web pages as an HTML document

I'm looking to extract the HTML content of a webpage. Within this HTML, there are two specific elements with XPaths that I need to retrieve. Unfortunately, my knowledge on this subject is quite limited. While searching for solutions, most examples in ...

c#html.net

When using iOS, the video compressing process stops automatically if the screen is no longer active while the file input

I am working on a web application that includes a file upload feature for large videos, typically 30 minutes or longer in duration. When a user on an iOS device selects a video to upload, the operating system will automatically compress it before triggerin ...

javascripthtmliosiphone

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Seeking guidance as a novice in web development. I am planning to design a table with input fields that will be sent to the server upon submission. What is the preferred method for achieving this? Is it advisable to utilize html-tables or would it be more ...

htmlcsshtml-table

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

cssangularjshtml

Tips for implementing page-break-after:always within a bootstrap row?

I have a bootstrap row with a set of divs inside like this: @media print { p { page-break-after : always } } <div class = "row"> <div> data1 </div> <p> break page here </p> <div> data2 </div> <div> ...

htmlcssangular

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

javascriptjqueryhtml

Steps for achieving uniform positioning of a div element that dynamically appears within a table with two rows and four table data cells

If I want to display the same div in different positions dynamically on my page, how can I achieve that? My page has a table with two rows and two columns, each containing an Embed button. When these buttons are clicked, a div is shown with a list of site ...

jqueryhtmlcss

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

htmlcss

Align the timing of the animation with the dataset in ThreeJS

I am faced with the challenge of working with data that includes time in milliseconds and the x, y, z position of an object at each specific time interval. msec |pos_x |pos_y |pos_z ------------------------------ 0 |318 |24 |3 25 |3 ...

javascripthtmlanimationtimethree.js

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

The animation of react-circular-progressbar is experiencing a slight delay of one second

I managed to create a circular progress bar with a timer and a button that adds +10 seconds to the timer. However, I'm facing a 1-second delay in the animation of the progress bar when clicking on the button. If anyone could assist me in resolving t ...

javascripthtmlcssreactjscountdowntimer

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

I am looking to pass a parameter to a function that is called via onclick within an ng-repeat: <!-- Sliding bar (bottom) --> <div ng-show="currentSVG && currentLanguage && currentWidth && bannerHeight" pageslide ps-open=" ...

javascripthtmlangularjsonclickangularjs-ng-repeat

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...

htmlcssdatatables

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

Having trouble with the Tailwind transition in my Next.js component

I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...

cssnext.jstailwind-csstailwind-ui

Unable to modify the CSS properties of the titlebar in jQuery UI dialog

Is there a way to modify the background color of a jQuery UI dialog titlebar? Here is the code I am using: jQuery("#divId").dialog({ title: 'Information' }); jQuery("#divId .ui-dialog-titlebar").css("background-color", "red"); For m ...

jqueryhtmlcssjquery-ui

Guide to creating a nested table with JavaScript

Currently, I am utilizing JavaScript to dynamically generate a table. To better explain my inquiry, here is an example of the HTML: <table id='mainTable'> <tr> <td> Row 1 Cell 1 </td> ...

javascripthtmldynamichtml-table

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

javascripthtmlcssangularjs

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Using JQuery selectors in conditional statements

In the context of my webpage, clicking on a tag filters and displays corresponding posts. I now need to handle pagination to navigate to the next set of posts. However, I am facing difficulties with the JavaScript if statement in jQuery, where I struggle ...

javascriptjqueryhtmlif-statement