CODEWITHSUNDEEP
htmlcss
Emily Easton
Emily Easton

Reputation: 3

Stacking Divs Align Centre

I am using the card elements from Googles Material Design Lite html theme https://getmdl.io/components/#cards-section.

My cards sit next to each other & align to the left of the page. I want the cards to align to the centre of the page, whilst maintaining the stacking functionality for responsive views.

In short, I have two divs:

<div class="page__cards-div">
    <div class="page__card">div content...</div>
</div>

The corresponding CSS is as follows:

.page__cards-div {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.page__card {
    float: left;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
    width: 330px;
    height: 530px; 
    align-content: center;
    justify-content: center;
}

(I've simplified the relevant code - removing the Material Design theme references)

My cards are still aligning to the left hand side however.

Upvotes: 0

Views: 597

Answers (2)

Ma&#237;ra K
Ma&#237;ra K

Reputation: 81

Move the justify-content: center; to the parent, in order to align content inside of it.

This cheatsheet really helped me understand Flexbox in a visual way!

Upvotes: 2

tao
tao

Reputation: 90048

justify-content is a flex parent property, not a flex child one. Move it on parent and it will work as expected.

Upvotes: 1

Related Questions