Gyermekelem függőleges igazítása

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

Gyermekelem függőleges igazítása:

kijelölő

{

align-self

kulcsszó;

}

Értéke lehet

stretch a gyermekelemet a rendelkezésre álló magasságra nyújtja
start a gyermekelemet a cella elejére (tetejére) igazítja
end a gyermekelemet a cella végére (aljára) igazítja
center a gyermekelemet a cella középre (középre) igazítja

1. Példa:

Forráskód


 

<head> 
...	
<style>
...
    .Elem {
      padding: 5px 0px;
      border:1px solid #066;
      background-color:#fff;
      text-align:center;
    }		
    .divGrid {
      padding: 0px 0px;
      height: 200px;
      display: grid;	
      grid-template-columns: 1fr 1fr 1fr;	
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 2px;
    }	
    .template-areas1 .a1 {align-self: start;}
    .template-areas1 .a3 {align-self: end;}
    .template-areas1 .a5 {align-self: center;}
  </style>
</head>
<body> 	
  <p>.a1 {align-self: start;<br>
  .a3 {align-self: end;}<br>
  .a5 {align-self: center;}	</p>	
  <div class="divGrid template-areas1">
    <div class="Elem a1">start</div>
    <div class="Elem a2">stretch</div>
    <div class="Elem a3">end</div>
    <div class="Elem a4">stretch</div>
    <div class="Elem a5">center</div>
    <div class="Elem a6">stretch</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ő: grid17.html