I am currently utilizing the card components from Google's Material Design Lite HTML theme, which can be found at .
At the moment, my cards are positioned next to each other and aligned to the left side of the page. I am looking to center the cards on the page while keeping the stacking functionality for responsive views.
To provide some context, I have two divs set up as follows:
<div class="page__cards-div">
<div class="page__card">content goes here...</div>
</div>
The accompanying CSS code is outlined below:
.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 omitted the Material Design theme references in order to simplify the code)
Despite the CSS adjustments, my cards continue to align to the left-hand side. Any guidance on correcting this issue would be greatly appreciated.