Блог

Главная - Вопросы по программированию - Дочерний элемент CSS-сетки не центрируется

Дочерний элемент CSS-сетки не центрируется

#css #css-grid

#css — код #css-сетка

Вопрос:

Я пробую макет с использованием CSS grid. Внутри заголовка у меня есть div с классом под названием logo, и я хочу, чтобы он был выровнен по вертикали.

Вот полный код (просмотрите полноэкранный режим, чтобы увидеть проблему):

 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>

Я пробовал: align-content: center и justify-self: center, но он не перемещается сверху.

Как я могу выровнять логотип класса по вертикали в заголовке с помощью css grid?

Ответ №1:

Это то, что вы хотите сделать

 <!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>

Другой вариант

  .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;
    
  }

Комментарии:

1. Извините, я имею в виду вертикально центрированный. Он должен быть слева, но в вертикальном центре заголовка. Вы можете увидеть проблему только тогда, когда она у вас есть на всей странице. Я опубликовал скриншот

2. Хорошо, я жду

3. Это тот образ, который вам нужен? Я приложил скриншот.

4. Хорошо, теперь я понимаю, я немедленно обновляю ответ.

5. Извините, использование px не будет автоматически оставаться центрированным, если заголовок должен был изменяться во время выполнения

Ответ №2:

Это все, что вам нужно:

 .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.
}