My objective is to center this matrix vertically. I want the cells to be 32px far from each other both vertically and horizontally, but the whole matrix to have equal distances to the left and right edge of the screen (vertical centering). My code:
.myArticle0 {
column-count: 1;
column-gap: 32px;
column-rule: 0px single #aa00aa;
margin: 2em;
line-height: 100px;
}
.parent {
width: 100%;
}
@media screen and (min-width: 700px) {
.myArticle1 {
column-count: 2;
column-gap: 32px;
column-rule: 0px single #aa00aa;
line-height: 200px;
margin: 2em;
}
}
@media screen and (min-width: 1050px) {
.myArticle2 {
column-count: 3;
column-gap: 32px;
column-rule: 0px single #aa00aa;
line-height: 300px;
}
}
h1 {
text-align: center;
margin-top: 1.5em;
}
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
.t7 {
width: 350px;
height: 100px;
line-height: 100px;
background-color: #f0a30b;
margin-bottom: 2em;
}
.c1 {
text-align: center;
}
<body>
<h1>I am a cool headline</h1>
<div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>
<div >
<div >
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
</div>
</div>
</body>
I tried to do the parent and child element. But it is still not centered.
Thank you.
CodePudding user response:
There is a way simpler way to do this layout, but the quick fix for your layout is to add display: flex
and justify-content: center
to your .parent
.myArticle0 {
column-count: 1;
column-gap: 32px;
column-rule: 0px single #aa00aa;
margin: 2em;
line-height: 100px;
}
.parent {
width: 100%;
justify-content: center;
display: flex;
}
@media screen and (min-width: 700px) {
.myArticle1 {
column-count: 2;
column-gap: 32px;
column-rule: 0px single #aa00aa;
line-height: 200px;
margin: 2em;
}
}
@media screen and (min-width: 1050px) {
.myArticle2 {
column-count: 3;
column-gap: 32px;
column-rule: 0px single #aa00aa;
line-height: 300px;
}
}
h1 {
text-align: center;
margin-top: 1.5em;
}
@import url('https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
.t7 {
width: 350px;
height: 100px;
line-height: 100px;
background-color: #f0a30b;
margin-bottom: 2em;
}
.c1 {
text-align: center;
}
<body>
<h1>I am a cool headline</h1>
<div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>
<div >
<div >
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
<div class=t7>cool text</div>
</div>
</div>
</body>