0

I have a div with grid layout, with several divs inside. I want the divs inside the grid to be full-height, and I want the content of the divs inside the grid to be centered vertically. I already looked all over the place for a solution, but found none that worked. So far, I've tried using the justify-content and align-items, but they are not doing what I want.

This is what I've tried:

.wrapper {
  display: flex;
  flex-direction: row;
}

.card {
  background-color: beige;
  border: 1px solid rgb(148, 148, 109);
  border-radius: 5%;
  padding: 10px 15px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
}

.one {
  flex: 1;
}

.two {
  flex: 1;
  justify-content: center;
  align-items: center;
  vertical-align: center;
}
<div class="wrapper">
  <div class="card one">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
    <h4>Item 3 just for content.</h4>
  </div>
  <div class="card two">
    <h2>Card 2</h2>
    <p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
  </div>
</div>

Any input is greatly appreciated!

Thanks! :)

Paul P.
  • 13
  • 3

4 Answers4

0

If I am not mistaken it should be so. Just on the "card" class:

display: flex; align-items: center;

Adding a div inside will put it in the center.

.wrapper {
  display: flex;
  flex-direction: row;
}

.card {
  background-color: beige;
  border: 1px solid rgb(148, 148, 109);
  border-radius: 5%;
  padding: 10px 15px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  flex: 1;
  display: flex;
  align-items: center;
}
<div class="wrapper">
  <div class="card">
    <div class="inside">
      <h2>Card 1</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
      <h4>Item 3 just for content.</h4>
    </div>
  </div>
  <div class="card">
    <div class="inside">
      <h2>Card 2</h2>
      <p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
    </div>
  </div>
</div>
Filippo Favaro
  • 44
  • 5
0

Like this? It messed up the look of your h2 but that can easily be fixed. Your instructions said header and the text aligned vertically so I assume that's what you want? Also the default direction for display flex is row, so there's no need to specify. Just a tip for cleaner code.

.wrapper {
  display: flex;
  flex-direction: row;
}

.card {
  background-color: beige;
  border: 1px solid rgb(148, 148, 109);
  border-radius: 5%;
  padding: 10px 15px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.one {
  flex: 1;
}

.two {
  flex: 1;
 color: red;
display: flex;
align-items: center;
 }
<div class="wrapper">
  <div class="card one">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
    <h4>Item 3 just for content.</h4>
  </div>
  <div class="card two">
    <h2>Card 2</h2>
    <p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
  </div>
</div>
LexiStroon
  • 1
  • 3
0

enter image description here

*this should work

.p-grid {
    display: flex;
    flex-wrap: wrap;
}

.p-align-center {
    align-items: center;
}

.vertical-container {
    margin: 0;
    height: 200px;
    background: #efefef;
    border-radius: 4px;
}
<h3>Vertical Alignment - Center</h3>
<div class="p-grid p-align-center vertical-container">

    <div class="p-col">
        <div class="box">4</div>
    </div>

</div>
chandu reddy
  • 1
  • 1
0

I hope this will help you. You forgot to add display: flex; to your cards, also when you add flex and you want to have your content in a column layout you have to add flex-direction: column; (row is the standard option)

.wrapper {
  display: flex;
  flex-direction: row;
}

.card {
    background-color: beige;
    border: 1px solid rgb(148, 148, 109);
    border-radius: 5%;
    padding: 10px 15px;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    justify-content: center;
    align-items: start;
    display: flex;
    flex-direction: column;
}
<div class="wrapper">
  <div class="card one">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum nihil, facere voluptas, amet ipsam, deleniti ullam dolores labore illum cumque praesentium perferendis accusantium. Aspernatur commodi, beatae culpa vel similique sequi.</p>
    <h4>Item 3 just for content.</h4>
  </div>
  <div class="card two">
    <h2>Card 2</h2>
    <p>I want the above heading and this text to be vertically centered on this card (justify-content and align-items doesn't work...</p>
  </div>
</div>
Weasle
  • 3
  • 1