CSS justify-items
La proprietà CSS3 justify-items controlla l'allineamento orizzontale nelle celle della griglia
Con justify-items puoi decidere come allineare orizzontalmente il contenuto all’interno di ciascuna cella di una griglia. È particolarmente utile per layout consistenti e visivamente ordinati, soprattutto in combinazione con align-items per l’allineamento verticale.
Sintassi
Significato dei valori principali:
-
start: allinea il contenuto all'inizio della cella (a sinistra nei layout LTR).
-
end: allinea il contenuto alla fine della cella (a destra nei layout LTR).
-
center: centra orizzontalmente il contenuto all'interno della cella.
-
stretch: (valore predefinito) allunga il contenuto per riempire tutta la larghezza disponibile della cella.
Esempio proprietà: justify-items
Codice Esempio: justify-items
.justify-example {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
justify-items: center; /* start | center | end | stretch */
background-color: #f6f8fa;
border: 2px dashed #999;
}.justify-example > div {
background-color: #4078f2;
color: white;
padding: 10px 20px;
border-radius: 6px;
}
Contenuto Esempio: justify-items
Esempio di utilizzo di justify-items
In questo esempio, ciascun contenitore usa un valore diverso per justify-items per mostrare l'allineamento orizzontale del contenuto in una griglia.
CSS e HTML per justify-items:
<style>
.justify-example {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100px;
justify-items: center; /* start | center | end | stretch */
background-color: #f6f8fa;
}
.justify-example > div {
background-color: #4078f2;
color: white;
padding: 10px 20px;
border-radius: 6px;
}
</style>
<div class="justify-example">
<div>Center</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
