Gyermekelem vízszintes igazítása

A justify-self tulajdonság segítségével vízszintesen igazíthatjuk a cellák tartalmát.

Gyermekelem vízszintes igazítása:

kijelölő

{

justify-self

kulcsszó;

}

Értéke lehet

stretch a gyermekelemet a rendelkezésre álló szélességre nyújtja
start a gyermekelemet a cella elejére (balra) igazítja
end a gyermekelemet a cella végére (jobbra) 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 {justify-self: start;}
   .template-areas1 .a3 {justify-self: end;}
   .template-areas1 .a5 {justify-self: center;}
 </style>
</head>
<body> 	
  <p>.a1 {justify-self: start;<br>
  .a3 {justify-self: end;}<br>
  .a5 {justify-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ő: grid16.html