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 div
zaró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.
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>
5 answers
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:
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ślonedisplay
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:
Oto sekcja na temat absolutnego pozycjonowania w specyfikacji siatki:
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
2018-05-25 16:13:10
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ładisplay: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>
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>
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.)
Zdrówko!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>
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