Центрирование в сетке CSS

Я пытаюсь создать простую страницу с помощью CSS Grid.

То, что я не могу сделать, - это центрировать текст из HTML на соответствующие ячейки сетки.

Я попытался разместить контент в отдельном div как внутри, так и вне селекторов left_bg и right_bg и играть с некоторыми из свойств CSS безрезультатно.

Как это сделать?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Ответы

Ответ 1

Этот ответ имеет два основных раздела:

Понимание того, как выравнивание работает в CSS Grid.
Шесть методов центрирования в CSS Grid.

Если вас интересуют только решения, пропустите первый раздел.

Структура и масштаб схемы сетки

Чтобы полностью понять, как центрирование работает в контейнере сетки, важно сначала понять структуру и масштаб макета сетки.

HTML структура контейнера сетки имеет три уровня:

контейнер
предмет
Контент

Каждый из этих уровней не зависит от других, с точки зрения применения свойств сетки.

Объем контейнера сетки ограничен отношением родитель-потомок.

Это означает, что контейнер сетки всегда является родителем, а элемент сетки всегда является дочерним. Свойства сетки работают только в пределах этих отношений.

Потомки контейнера сетки за пределами дочерних элементов не являются частью сетки и не принимают свойства сетки. (По крайней мере, до тех пор, subgrid функция subgrid не будет реализована, что позволит потомкам элементов сетки уважать строки основного контейнера.)

Здесь приведен пример описанной выше структуры и области видимости.

Представьте себе сетку типа tic-tac-toe.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

Вы хотите, чтобы X и O были центрированы в каждой ячейке.

Таким образом, вы применяете центрирование на уровне контейнера:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

Но из-за структуры и объема макета сетки justify-items на контейнере центрируют элементы сетки, а не контент (по крайней мере, не напрямую).

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Ответ 2

Вы можете использовать flexbox для центрирования текста. Кстати, нет необходимости в дополнительных контейнерах, потому что текст рассматривается как анонимный элемент гибкости.

Из flexbox спецификации:

Каждый дочерний поток flex container становится гибким элементом, и каждый непрерывный пробег текста, который содержится непосредственно внутри контейнера , завернут в анонимный flex item. Однако анонимный элемент гибкости, содержащий только пробел (т.е. символы, на которые может влиять white-space) не отображается (как если бы это было display:none).

Итак, просто создайте элементы сетки в виде гибких контейнеров (display: flex) и добавьте align-items: center и justify-content: center в центр как по вертикали, так и по горизонтали.

Также выполняется оптимизация HTML и CSS:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Ответ 3

Не пытайтесь использовать flex; Оставайтесь с сеткой css!!:)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

выполняет центрирование здесь.

Если вы хотите центрировать что-то внутри div, находящееся внутри ячейки ячейки, вам нужно определить вложенную сетку, чтобы заставить ее работать. (Посмотрите на скрипту, как показано на обоих примерах.)

https://css-tricks.com/snippets/css/complete-guide-grid/

Ура!

Ответ 4

Попробуйте использовать flex:

Демо-версия Plunker: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Ответ 5

Вы хотите это?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>