Justify bottom and top div contents, and keep content in the middle centered-CodePudding

Before anything, I'm very new to this HTML and CSS world.

I have this HTML code:

<section class="instructions">
    <div class="row">
        <div class="instructions-col">
            <h5>1.</h5>
            <p>First, you'll need to choose your language. Click the button indicated.</p>
            <img src="media/instructions/1.png">
        </div>
        <div class="instructions-col">
            <h5>2.</h5>
            <p>Use the switch to choose your language.</p>
            <img src="media/instructions/2.png">
        </div>
        <div class="instructions-col">
            <h5>3.</h5>
            <p>When the right language is selected, click the indicated button.</p>
            <img src="media/instructions/3.png">
        </div>
        <div class="instructions-col">
            <h5>4.</h5>
            <p>Elderoid's idiom is now updated. Click the indicated button to continue.</p>
            <img src="media/instructions/4.png">
        </div>
        <div class="instructions-col">
            <h5>5.</h5>
            <p>This is the welcome screen. Click the indicated button to continue.</p>
            <img src="media/instructions/5.png">
        </div>
    </div> 
</section>

This code creates a row of divs, each containing a title, a paragraph and an image.

I also added this CSS code:

.instructions {
   width: 80%;
   margin: auto;
}
.row {
    display: flex;
    justify-content: space-between;
}
.instructions-col {
    padding-top: 20px;
    padding-bottom: 20px;
    flex-basis: 15%;
    background: #fff7f3;
    border-radius: 10px;
    text-align: center;
}
.instructions-col p {
    font-size: 14px;
    line-height: 22px;
    padding: 20px;
}
.instructions-col img {
    padding-top: 0;
    border-radius: 6px;
}

Resulting in this:

I all looks pretty close to what I'm aiming for, except for column 2 (the second div). As you can see in the picture, the paragraph is smaller and that results in the images not getting lined up horizontally.

I need the images to be aligned to the bottom of the div (all at the same level), so as the titles to be aligned to the top of the div (all at the same level too). Also, the paragraph in the middle, should be centered between the title and image.

I've been playing with margins and the justify-content tag, but haven't been able to pull it off.

Any suggestions?

CodePudding user response：

The cause is the text, not the images. You have an image under a paragraph of text, so the position of the image depends on where the text ends. The other blocks of text have 3 lines, but in col 2 it's just two lines. So, the image starts a line higher.

The solution is either to add more text (even a line break) to make all the text blocks the same size, or to align the image to the bottom of the containing div (using flexbox, ideally) rather than being positioned based on the text block as is the case now.

CodePudding user response：

You can add display: flex and flex-direction: column to .instructions-col. Also add flex: 1 to paragraph. Then your paragraph will push heading to top and image to bottom.