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