Kevin Powell - Community•2y ago

How to add content below centered div

The red part of the image is an element centered to the screen with flex, but I also want to add some content below that, without affecting its position. How can I do that?

4 Replies

lkoOP•2y ago

Because I cant do something like this because both of the elements will be centered and I dont want that

<div class="parent">
<h1>This text is centered and in the red part</h1>
<span>I want this part to be below the centered part</span>
</div>

<div class="parent">
<h1>This text is centered and in the red part</h1>
<span>I want this part to be below the centered part</span>
</div>

.parent {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.parent {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

~MARSMAN~•2y ago

Maybe add a margin top of 50vh for your parent container or h1 tag? The content flow will be the same it will only move down as the h1 margin is pushing it. But you should know that using vh might not give you the wanted result in phone screen. also you should use flex-direction of column and not row, based on your picture I mean.

lkoOP•2y ago

Why on phone it'll be different? I mean, it's responsive so 50vh on pc is different from 50vh on smartphone, did you mean this or something else? Also yes, I should have used column, I just wrote the code directly on discord to show an example

Coder_Carl•2y ago

you can either: 1) set a padding-top on the body to equal whatever you need to push it all down and then align-center with flex.

html, body {
  height: 100%;
}
body {
  padding-top: 20%;
}
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

html, body {
  height: 100%;
}
body {
  padding-top: 20%;
}
.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

2) set it up with grid

html, body {
  height: 100%;
}
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1em;
  background: skyblue;
}
.child {
  background: #bebebe;
  color: black;
  padding: 0.5em 1em;
}
.child:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
}
.child:nth-of-type(2) {
  grid-column: 2;
  grid-row: 3;
}

html, body {
  height: 100%;
}
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1em;
  background: skyblue;
}
.child {
  background: #bebebe;
  color: black;
  padding: 0.5em 1em;
}
.child:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
}
.child:nth-of-type(2) {
  grid-column: 2;
  grid-row: 3;
}

I'm a little unsure why you would want to do this but 🤷

Gaming

Programming

How to add content below centered div