logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Sorok függőleges igazítása



A align-items tulajdonság segítségével függőlegesen igazíthatjuk a sorok tartalmát.

Sorok tartalmának függőleges igazítása:

kijelölő
{
align-items
:
kulcsszó;
}

Értéke lehet

  • stretch a sorok tartalmát a rendelkezésre álló magasságra nyújtja
  • start a sorok tartalmát a sor tetejéhez igazítja
  • end a sorok tartalmát a sor aljához igazítja
  • center a sorok tartalmát a sor középre (középre) igazítja


1. Példa:

Forráskód



 
<head> ... <style> ... .divGrid { padding: 0px 0px; height: 200px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px; grid-gap: 2px; } .template-areas1 {align-items: center;} .template-areas2 {align-items: start;} .template-areas3 {align-items: end;} .template-areas4 {align-items: stretch;} </style> </head> <body> <p>template-areas1 {align-items: center;}</p> <div class="divGrid template-areas1"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> <div class="Elem a3">a3</div> <div class="Elem a4">a4</div> <div class="Elem a5">a5</div> <div class="Elem a6">a6</div> </div> <p>template-areas2 {align-items: start;}</p> <div class="divGrid template-areas2"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> <div class="Elem a3">a3</div> <div class="Elem a4">a4</div> <div class="Elem a5">a5</div> <div class="Elem a6">a6</div> </div> <p>template-areas3 {align-items: end;}</p> <div class="divGrid template-areas3"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> <div class="Elem a3">a3</div> <div class="Elem a4">a4</div> <div class="Elem a5">a5</div> <div class="Elem a6">a6</div> </div> <p>template-areas4 {align-items: stretch;}</p> <div class="divGrid template-areas4"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> <div class="Elem a3">a3</div> <div class="Elem a4">a4</div> <div class="Elem a5">a5</div> <div class="Elem a6">a6</div> </div> </body> </html>

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: grid18.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.