How do I center the content in the middle of the section?

Question

I'm trying to make each sections content centered. How do I do this? Am I using the containers/rows right? Do I put the alignment in the section? the container? the row? I don't know and neither works when I try

.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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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

what you want to achive .. please provide a image.. what is the reason for making row absolute position.. ?? — Chandra Shekhar, Feb 06 '23 at 05:08
@ChandraShekhar I don't want them to overlap? I want them to be positioned in the middle of their respective section — orange2piece, Feb 06 '23 at 05:21
Hi! I'm bit confused about your question but if your trying to set div inside container please add ""
"" to container div. — Jaswinder Kaur, Feb 06 '23 at 05:31
@JaswinderKaur I'm trying to have the content in both sections be aligned in the middle of their section... — orange2piece, Feb 06 '23 at 05:51
Your Image height is greater than content class height(As you set it 100vh). So You need to increase the section height. — Yogendra, Feb 06 '23 at 06:43

score 2 · Answer 1 · answered Feb 06 '23 at 06:20

<!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/bootstrap@5.3.0-alpha1/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>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">
<div class="row justify-center text-center">
    <div class="col-lg-10 mx-auto col-lg-5">
        <h1>heading</h1>
        <p>test</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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</body>
</html>

Yogendra · Answer 2 · 2023-02-06T07:00:41.450

As I have checked your snippet, I have found that you have set the section height 100vh and your Image height is greater than it, So Image is overlapping to other section. To remove overlapping, You need to set section height greater than inside image element or You can remove the inline height of content class which applied on section. And to align section content in middle. Use class text-center with content class or container class otherwise you will have to write it with 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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

How do I center the content in the middle of the section?

2 Answers2