Centrowanie w siatce CSS

179

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

To, czego nie mogę zrobić, to wyśrodkować tekst z HTML do odpowiednich komórek siatki.

Próbowałem umieszczenie treści w oddzielnych divs zarówno wewnątrz i na zewnątrz left_bgoraz right_bgselektorów i gry z niektórych właściwości CSS bezskutecznie.

Jak mam to zrobic?

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>

Rozwiń fragment

— burak
źródło

Proszę sprawdzić link w3.org/Style/Examples/007/center.en.html , mam nadzieję, że będzie pomocny.

— Ali

433

Ta odpowiedź ma dwie główne sekcje:

Zrozumienie, jak działa wyrównanie w siatce CSS.
Sześć metod wyśrodkowania w siatce CSS.

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

Struktura i zakres układu siatki

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

HTML konstrukcja kontenera siatki ma trzy poziomy:

pojemnik
przedmiot
Treść

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

Zakres kontenera sieci jest ograniczony do relacji rodzic-dziecko.

Oznacza to, że kontener siatki jest zawsze elementem nadrzędnym, a element siatki jest zawsze elementem podrzędnym. Właściwości siatki działają tylko w ramach tej relacji.

Potomkowie kontenera siatki poza elementami podrzędnymi nie są częścią układu siatki i nie akceptują właściwości siatki. (Przynajmniej nie do momentu subgridzaimplementowania funkcji, która pozwoli potomkom elementów siatki respektować wiersze głównego kontenera).

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

Wyobraź sobie kratkę przypominającą kółko i krzyżyk.

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.

Tak więc wyśrodkowujesz na poziomie pojemnika:

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-itemsna kontenerze wyśrodkowuje się elementy siatki, a nie treść (przynajmniej nie bezpośrednio).

Pokaż fragment kodu

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>

Rozwiń fragment

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

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

Pokaż fragment kodu

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>

Rozwiń fragment

Aby wyśrodkować treść, musisz przyjąć inne podejście. Odnosząc się ponownie do struktury i zakresu układu siatki, musisz traktować element siatki jako element nadrzędny, a treść jako element podrzędny.

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

Pokaż fragment kodu

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>

Rozwiń fragment

jsFiddle demo

Sześć metod wyśrodkowania w siatce CSS

Istnieje wiele metod wyśrodkowania 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>

Rozwiń fragment

Flexbox

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

Dokładniej, zmień element siatki w elastyczny kontener.

W przypadku tej metody nie ma konfliktu, naruszenia specyfikacji ani innego problemu. Jest czysty i ważny.

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

Pokaż fragment kodu

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>

Rozwiń fragment

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 elastyczny może być również kontenerem elastycznym, element siatki może być również kontenerem siatki. To rozwiązanie jest podobne do powyższego rozwiązania flexbox, z tym wyjątkiem, że centrowanie jest wykonywane za pomocą właściwości grid, a nie flex.

Pokaż fragment kodu

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>

Rozwiń fragment

`auto` marginesy

Służy margin: autodo wyśrodkowywania elementów siatki w pionie i poziomie.

grid-item {
  margin: auto;
}

Pokaż fragment kodu

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>

Rozwiń fragment

Aby wyśrodkować zawartość elementów siatki, musisz umieścić element w kontenerze grid (lub flex), zawinąć anonimowe elementy w ich własne elementy ( ponieważ nie mogą być bezpośrednio kierowane przez CSS ) i zastosować marginesy do nowych elementów.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

Pokaż fragment kodu

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>

Rozwiń fragment

Właściwości linii trasowania skrzynki

Rozważając użycie poniższych właściwości w celu wyrównania elementów siatki, przeczytaj autopowyższą sekcję dotyczącą marginesów.

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ść w poziomie w elemencie siatki, można użyć text-alignwłaściwości.

Pokaż fragment kodu

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>

Rozwiń fragment

Zwróć uwagę, że przy centrowaniu w pionie vertical-align: middlenie będzie działać.

Dzieje się tak, ponieważ vertical-alignwłaściwość dotyczy tylko kontenerów wbudowanych i kontenerów komórek tabeli.

Pokaż fragment kodu

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>

Rozwiń fragment

Można by powiedzieć, że display: inline-gridustanawia kontener na poziomie liniowym i to byłaby prawda. Dlaczego więc nie vertical-aligndziała w elementach siatki?

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

6.1. Wyświetlanie pozycji siatki

displayWartość elementu siatki jest blockified : jeśli określony displayo dziecko w napływ elementu generującego pojemnik siatka jest wartość inline poziomu, to oblicza się jego odpowiednik blok poziomu.

W kontekście formatowania bloków , do czego ta vertical-alignwłaściwość została pierwotnie zaprojektowana, przeglądarka nie oczekuje, że znajdzie element na poziomie bloku w kontenerze wbudowanym. To nieprawidłowy HTML.

Pozycjonowanie CSS

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

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

Po prostu ustaw position: absoluteelement, który ma być wyśrodkowany, i element position: relativenadrzędny, który będzie służył jako blok zawierający (zwykle jest to element nadrzędny). Coś takiego:

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

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

Pokaż fragment kodu

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>

Rozwiń fragment

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

Element nie pozostanie wyśrodkowany, szczególnie podczas zmiany rozmiaru ekranu

Oto sekcja dotycząca pozycjonowania bezwzględnego w specyfikacji Grid:

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

— Michael Benjamin
źródło

Cześć Michael, zastanawiałem się, czy jest to możliwe, używając siatki do zmiany rozmiaru każdej kolumny do rozmiaru najmniejszej kolumny w wierszu?

— The Codesee

@TheCodesee, to może być możliwe, w zależności od wszystkich Twoich wymagań .. Czy masz przykładowy kod? Lub rozważ opublikowanie nowego pytania ze wszystkimi szczegółami.

— Michael Benjamin

jest grid-container& grid-itemczy tagi HTML?

— diEcho

Są to niestandardowe tagi HTML. Możesz tworzyć własne tagi, tak jak zrobiłem to w tej wersji demonstracyjnej. stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

Dziękuję, to wspaniała odpowiedź. Uświadomiłem sobie, w twoich dwóch pierwszych przykładach, że między flexi grid, align-itemspozostaje takie samo, ale z jakiegoś powodu justify-contentstaje sięjustify-items

— WoJ

Możesz użyć flexbox, aby wyśrodkować tekst. Nawiasem mówiąc, nie ma potrzeby stosowania dodatkowych kontenerów, ponieważ tekst jest traktowany jako anonimowy element elastyczny.

Ze specyfikacji flexbox :

Każdy element podrzędny w przepływie kontenera elastycznego staje się elementem elastycznym , a każdy ciągły ciąg tekstu, który jest bezpośrednio zawarty w kontenerze elastycznym, jest opakowany w anonimowy element elastyczny . Jednak anonimowy element flex, który zawiera tylko białe znaki (tj. Znaki, na które właściwość może mieć wpływ white-space) nie jest renderowany (tak jakby był display:none).

Po prostu utwórz elementy siatki jako elastyczne kontenery ( display: flex) i dodaj align-items: centeri justify-content: centerwyśrodkuj zarówno w pionie, jak iw poziomie.

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>

Rozwiń fragment

— Vadim Ovchinnikov
źródło

Nawet nie próbuj używać flex; zostań z siatką css !! :)

https://jsfiddle.net/ctt3bqr0/

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

wykonuje tutaj pracę centrowania.

Jeśli chcesz wyśrodkować coś, co jest w środku div, czyli wewnątrz komórki siatki, musisz zdefiniować zagnieżdżoną siatkę, aby działała. (Proszę spojrzeć na skrzypce w obu przykładach).

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

Twoje zdrowie!

— Konrad Albrecht
źródło

Zastanawiałem się nad zagnieżdżonymi siatkami. Dziękuję za pokazanie mi, jak to się robi. Uważasz więc, że w przypadku siatki należy unikać flexu, czy też można je łączyć?

— buraki

Można go łączyć, ale musisz mieć pewność, że używasz odpowiedniego narzędzia do pracy. Poświęć trochę czasu i obejrzyj prezentację Rachels, która wyjaśni Ci wiele w temacie siatki css. youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

Problem z tym podejściem pojawia się, gdy używasz obramowań na elementach siatki ...

— Andrew

Można to skrócić o place-self: center;.

— DevonDahon

Właściwość CSS place-items shortand ustawia odpowiednio właściwości align-items i justify-items. Jeśli druga wartość nie jest ustawiona, używana jest również pierwsza wartość.

.parent {
  display: grid;
  place-items: center;
}

— CloudBranch
źródło

place-itemsnie jest obecnie obsługiwany w edge

— Konrad Albrecht

Spróbuj użyć flex:

Demo Plunkera: 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>

— Younis Ar M
źródło

-2

Chcesz to?

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>

Rozwiń fragment

— Renato siqueira
źródło

Nie do końca. Tekst również powinien być wyrównany w pionie.

— buraki

Użyj

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira

Centrowanie w siatce CSS

Struktura i zakres układu siatki

Sześć metod wyśrodkowania w siatce CSS

Flexbox

Układ siatki

auto marginesy

Właściwości linii trasowania skrzynki

text-align: center

Pozycjonowanie CSS

`auto` marginesy

`text-align: center`