Centrowanie w CSS Grid

Question

Centrowanie w CSS Grid

Próbuję stworzyć prostą stronę z CSS Grid.

Nie mogę wyśrodkować tekstu z HTML do odpowiednich komórek siatki.

Próbowałem umieszczać zawartość w oddzielnych selektorach divzarówno wewnątrz, jak i na zewnątrz selektorów left_bg i right_bg i grać z niektórymi właściwościami CSS bez skutku.

Jak mam to zrobić?

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>

37

html css centering css3 css-grid

Author: Michael_B, 2017-08-06

Source

5 answers

Możesz użyć flexbox do wyśrodkowania tekstu. Przy okazji nie ma potrzeby stosowania dodatkowych kontenerów, ponieważ tekst jest uważany za anonimowy element flex.

From flexbox specs :

Każdy potomek w przepływie flex container staje się Flex item , a każdy ciągły bieg tekstu, który jest bezpośrednio zawarty w Flex container jest zawinięty w anonimowy Flex item . Jednak anonimowy element flex, który zawiera tylko biały spacja (tzn. znaki, na które może mieć wpływ white-space właściwość) nie jest renderowana (tak jakby była display:none).

Więc po prostu zrób elementy siatki jako elastyczne kontenery (display: flex) i dodaj align-items: center i justify-content: center, aby wyśrodkować zarówno pionowo, jak i poziomo.

Przeprowadzono również optymalizację HTML i 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>

9

Author: Vadim Ovchinnikov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 07:42:05

Spróbuj użyć flex:

Plunker demo: 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>

0

Author: Younis Ar M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 07:43:49

Nawet nie próbuj używać flex; pozostań przy css grid!! :)

Https://jsfiddle.net/ctt3bqr0/

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

Zajmuje się centrowaniem.

Jeśli chcesz wyśrodkować coś, co znajduje się wewnątrz {[1] } wewnątrz komórki siatki, musisz zdefiniować zagnieżdżoną siatkę,aby działała. (Proszę spojrzeć na oba pokazane tam przykłady.)

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

Zdrówko!

0

Author: Konrad Albrecht,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-18 21:09:36

Chcesz tego?

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>

-1

Author: Renato siqueira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 07:32:42

score 101 · Accepted Answer

Ta odpowiedź ma dwie główne sekcje:

zrozumienie, jak działa wyrównanie w CSS Grid.
sześć metod centrowania w CSS Grid.

Jeśli interesują Cię tylko rozwiązania, pomiń pierwszą sekcję.

Struktura i zakres układu siatki

Aby w pełni zrozumieć, jak centrowanie działa w kontenerze siatki, ważne jest, aby najpierw zrozumieć strukturę i zakres układu siatki.

HTML struktura pojemnika siatki ma trzy poziomy:

Pojemnik
pozycja
treść

Każdy z tych poziomów jest niezależny od pozostałych pod względem zastosowania właściwości siatki.

Zakres kontenera siatki jest ograniczony do relacji rodzic-dziecko.

Oznacza to, że kontener siatki jest zawsze rodzicem, a element siatki jest zawsze potomkiem. Właściwości siatki działają tylko w tym związek.

Potomkowie kontenera siatki poza potomkami nie są częścią układu siatki i nie akceptują właściwości siatki. (Przynajmniej nie do subgrid zaimplementowano funkcję, która pozwoli potomkom elementów siatki na przestrzeganie linii podstawowego kontenera.)

Oto przykład koncepcji struktury i zakresu opisanych powyżej.

Wyobraź sobie jak w kółko i krzyżyk / align = "left" /

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

Chcesz, aby X I O były wyśrodkowane w każdej komórce.

Więc zastosuj centrowanie na poziomie kontenera:

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

Ale ze względu na strukturę i zakres układu siatki, justify-items na kontenerze centruje elementy siatki ,a nie zawartość (przynajmniej nie bezpośrednio).

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>

Ten sam problem z align-items: zawartość może być wyśrodkowana jako produkt uboczny, ale straciłeś układ.

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

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-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>

Aby wyśrodkować zawartość, musisz przyjąć inne podejście. Odnosząc się ponownie do struktury i zakresu układu siatki, należy traktować element siatki jako rodzica, a zawartość jako potomka.

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

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

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

section {
  display: flex;
  justify-content: center;
  align-items: center;
  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>

Jsfiddle demo

Sześć metod centrowania w CSS Siatka

Istnieje wiele metod centrowania elementów siatki i ich zawartości.

Oto podstawowa siatka 2x2:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Flexbox

Aby w prosty i łatwy sposób wyśrodkować zawartość elementów siatki, użyj flexbox.

Dokładniej, przekształć element siatki w elastyczny kontener.

Nie ma konfliktu, naruszenia specyfikacji lub innych problemów z tą metodą. Jest czysty i ważne.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Zobacz ten post, aby uzyskać pełne wyjaśnienie:

jak wyśrodkować elementy w pionie i poziomie W Flexbox

Układ Siatki

W ten sam sposób, w jaki element flex może być również kontenerem flex, element grid może być również kontenerem grid. Rozwiązanie to jest podobne do powyższego rozwiązania flexbox, z tym że centrowanie odbywa się za pomocą siatki, a nie flex, właściwości.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

`auto` marginesy

Użyj margin: auto, aby wyśrodkować elementy siatki w pionie i poziomie.

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Aby wyśrodkować zawartość elementów siatki, musisz przekształcić je w kontener siatki (lub flex), owinąć anonimowe elementy we własne elementy (, ponieważ nie mogą być bezpośrednio kierowane przez CSS) i zastosować marginesy do nowych elementów. żywioły.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Właściwości Wyrównania Pola

Rozważając użycie następujących właściwości do wyrównania elementów siatki, przeczytaj sekcję na marginesie auto powyżej.

align-items
justify-items
align-self
justify-self

Https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

Aby wyśrodkować zawartość poziomo w elemencie siatki, możesz użyć text-align własność.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Zauważ, że w przypadku centrowania pionowego, vertical-align: middle nie zadziała.

To dlatego, że vertical-align właściwość dotyczy tylko kontenerów inline i table-cell.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Można by powiedzieć, że display: inline-grid ustanawia kontener na poziomie liniowym, i to byłaby prawda. Więc dlaczego vertical-align nie działa w elementach siatki?

Powodem jest to, że w kontekst formatowania siatki, elementy są traktowane jako elementy blokowe.

6.1. Element Siatki Wyświetl

Wartość display elementu siatki wynosi blockified: jeśli określone display potomka w przepływie elementu generującego kontener siatki jest wartością na poziomie inline, oblicza się na jego ekwiwalent blokowy.

W kontekst formatowania bloków, something the vertical-align właściwość została pierwotnie zaprojektowana dla, przeglądarka nie oczekuje, że znajdzie element na poziomie bloku w kontenerze na poziomie wbudowanym. To nieprawidłowy HTML.

CSS Pozycjonowanie

Wreszcie, istnieje ogólne rozwiązanie centrowania CSS, które działa również w siatce: absolutne pozycjonowanie

Jest to dobra metoda centrowania obiektów, które należy usunąć z obiegu dokumentu. Na przykład, jeśli chcesz:

Po prostu ustaw position: absolute na elemencie, który ma być wyśrodkowany, i position: relative na przodku, który będzie służył jako blok zawierający (zwykle jest to rodzic). Coś takiego:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Oto pełne wyjaśnienie, jak działa ta metoda:

Element nie pozostanie wyśrodkowany, zwłaszcza podczas zmiany rozmiaru ekran

Oto sekcja na temat absolutnego pozycjonowania w specyfikacji siatki:

https://www.w3.org/TR/css3-grid-layout/#abspos

Centrowanie w CSS Grid

5 answers

Struktura i zakres układu siatki

Sześć metod centrowania w CSS Siatka

Flexbox

Układ Siatki

auto marginesy

Właściwości Wyrównania Pola

text-align: center

CSS Pozycjonowanie

`auto` marginesy

`text-align: center`