CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

Vertical center align for multiple page sections

Background:

I am trying to create an interactive lesson. Each lesson is a single page that you scroll down to get to each section (I call them cards).

Ideal scenario

I want each section (card) to be full screen with the content vertically centred... like this:

enter image description here

My Code

I am loading each card (section) from a database... it has a title, the content and a file-path for the image on the right.

<div class="container-fluid" style="background:#eaeaec">

    <?php foreach ($cards as $card) : ?>

    <div class="container">
        <div style=" position: absolute;top: 50%;left: 50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);">
            <div class="col-md-6">

                <h1>
                    <?php echo $card->card_title; ?>
                    <i class="fa fa-volume-up"></i>
                </h1>

                <?php echo $card->card_content; ?>

            </div>
            <div class="col-md-6">
                <img src="<?php echo $card->card_file_path; ?>" alt="" style="width:100% !important">
            </div>
        </div>
    </div>

    <?php endforeach; ?>

</div>

Problem:

You can see the in-line CSS which I have tried. This does actually work great... for a single card... but when I add another card all the content gets centred on top of the first card!

enter image description here

Question:

How can I get each section to be the exact height of the window with the card content vertically aligned to that section.

EDIT 1: Changing my css to position:relative has the following result...

enter image description here

Upvotes: 2

Views: 33

Answers (1)

nightfury
nightfury

Reputation: 74

Tip: Try to avoid using inline styles.

I would suggest to use flexbox:

.container {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

Upvotes: 2

Related Questions