CODEWITHSUNDEEP
htmlcssflexbox
vinni
vinni

Reputation: 653

Aligning elements in a centered column

I have an article with text that's centered on the page and has a width of 910px.

My code for it is:

section {
    max-width: 910px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
}

Now for pictures I'd like to add the picture floating left with a description on the right (that is vertically centered):

enter image description here

I tried the following html:

<div class="alignSide">
    <div class="leftRow"></div>
    <div class="middleRow"></div>
    <div class="rightRow"></div>
</div>

Here's an example: https://jsfiddle.net/5sueow8o/

But somehow it doesn't work out. The two outer divs are too big. You can see the blue div is not aligned with the upper <section>.

Is there a way I could do it with flexbox maybe?

Upvotes: 1

Views: 64

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371013

Consider making these adjustments to your section element:

HTML (no changes)

CSS

body {
    display: flex;               /* establish flex container */
    flex-direction: column;      /* stack flex items vertically */
    align-items: center;         /* center flex items horizontally */
}

section {
    max-width: 500px;
}

section img {
    width:100%;
}

Now the blue div is perfectly aligned with the section div above.

Revised Demo

Upvotes: 1

Related Questions