How can I vertically center all the text in a grid?

Question

Without touching my HTML, how can I position all the text so that it's positioned in the middle of my image?

I've tried using justify-content, align-content, etc, but it's not working.

h1 { grid-area: h1; }  
h2 { grid-area: h2; }  
p { grid-area: p; }  
img { grid-area: img; }
  

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "h1 img" 
    "h2 img" 
    "p img" 
    ". img"; 
  
   text-align: center;
}

<div class="grid">
  <h1>Header</h1>
  <h2>Subheader</h2>
  <img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
  <p>some paragraph text...</p>
</div>

score 0 · Answer 1 · answered Jul 11 '20 at 02:20

0

To vertically align you should use

align-items: center

Here you can find detailed explanation of grid alignment. Centering in CSS Grid

answered Jul 11 '20 at 02:20

Dark Matter

373
6
18

score 0 · Accepted Answer · answered Jul 11 '20 at 02:32

Change your grid-template-areas with

". img"
"h1 img"
"h2 img"
"p img"
". img";

and add align-content:center

h1 {
  grid-area: h1;
}

h2 {
  grid-area: h2;
}

p {
  grid-area: p;
}

img {
  grid-area: img;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: ". img" "h1 img" "h2 img" "p img" ". img";
  text-align: center;
  align-content: center;
}

.grid>* {
  padding: 0;
  margin: 0;
  border: solid red;
}

<div class="grid">
  <h1>Header</h1>
  <h2>Subheader</h2>
  <img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
  <p>some paragraph text...</p>
</div>

How can I vertically center all the text in a grid?

2 Answers2