CODEWITHSUNDEEP
csscss-grid
teumec
teumec

Reputation: 95

Css Grid Child item not centering

I am trying out a layout using CSS grid. Inside the header I have a div with a class called logo and I want it vertical aligned.

Here is the full code (View full-screen to see the issue):

html,
body {
  height: 100%;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "h h" "s m" "f f";
  grid-gap: 10px;
}

.header {
  grid-area: h;
  background-color: red;
}

.header .logo {
  display: inline-grid;
  padding: 5px;
  border: 1px solid #ccc;
  align-content: center;
}

.sidebar {
  grid-area: s;
  background-color: grey;
}

.main {
  grid-area: m;
  background-color: purple;
}

.footer {
  grid-area: f;
  background-color: blue;
}
<div class="container">
  <div class="header">
    <div class="logo">
      <img src="https://via.placeholder.com/50" alt="">
    </div>
  </div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

I've tried: align-content: center and justify-self: center, but it's not moving from the top.

How can I vertical align class logo in the header using css grid?

Upvotes: 0

Views: 855

Answers (2)

NigelDcruz
NigelDcruz

Reputation: 927

This is all you need:

.header .logo {
  display: inline-grid;
  padding: 5px;
  border: 1px solid #ccc; //remove this
  align-content: center;
  height: 100%; //This will work for responsive screens as well.
}

Upvotes: 0

damla
damla

Reputation: 53

Is this what you want to do

<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

  <style>
    html,
    body {
      height: 100%;
    }
    
    .container {
      display: grid;
      height: 100%;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "h h" "s m" "f f";
      grid-gap: 10px;
    }
    
    .header {
      padding: 70px 0;     /* this code */
      grid-area: h;
      background-color: red;
    }
    
    .header .logo {
      display: inline-grid;
      padding: 5px;
      border: 1px solid #ccc;
    }
    
    .sidebar {
      grid-area: s;
      background-color: grey;
    }
    
    .main {
      grid-area: m;
      background-color: purple;
    }
    
    .footer {
      grid-area: f;
      background-color: blue;
    }
  </style>

</head>

<body>

  <div class="container">
    <div class="header">
      <div class="logo">
        <img src="https://via.placeholder.com/150" alt="">
      </div>
    </div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>

</body>

</html>

Other Opsion

 .header {
    display: table;
    overflow: hidden;
    height: 500px;
    grid-area: h;
    background-color: red;
  }

  .header .logo {
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #ccc;
    
  }

Upvotes: 1

Related Questions