Segui cinque tecniche di centratura durante una serie di test per scoprire quale è la più resistente al cambiamento.
Allineare al centro in CSS è una sfida nota, piena di battute e prese in giro. Nel 2020 Il CSS è cresciuto e ora possiamo ridere di queste battute senza imbarazzo.
Se preferisci i video, ecco una versione di questo post su YouTube:
La sfida
Esistono diversi tipi di centratura. Da casi d'uso diversi, numero di elementi da centrare e così via. Per dimostrare il ragionamento alla base di una tecnica di centratura "vincente", ho creato The Resilience Ringer. Si tratta di una serie di stress test per ogni strategia di centratura per bilanciare il rendimento e osservarne il rendimento. Alla fine, svelo la tecnica di punteggio più alta, oltre a un "valore più alto". Ci auguriamo che tu abbia acquisito nuove tecniche e soluzioni di centratura.
La suoneria di resilienza
L'indicatore di resilienza è una rappresentazione della mia convinzione che una strategia di centratura dovrebbe essere resiliente a layout internazionali, aree visibili di dimensioni variabili, modifiche del testo e contenuti dinamici. Questi principi hanno contribuito a definire i seguenti test di resilienza per verificare la resistenza delle tecniche di centratura:
- Schiacciato: la centratura dovrebbe essere in grado di gestire le modifiche alla larghezza
- Schiacciato: il centro dovrebbe essere in grado di gestire le modifiche all'altezza
- Duplica: la centratura deve essere dinamica in base al numero di elementi
- Modifica: la centratura deve essere dinamica in base alla lunghezza e alla lingua dei contenuti
- Flusso: il centratura deve essere indipendente dalla direzione del documento e dalla modalità di scrittura
La soluzione vincente deve dimostrare la sua resilienza mantenendo i contenuti al centro mentre vengono compressi, schiacciati, duplicati, modificati e scambiati in varie modalità e direzioni di lingua. Un centro affidabile e resiliente, un centro sicuro.
Legenda
Ho fornito alcuni suggerimenti di colore per aiutarti a mantenere alcune metainformazioni nel contesto:
- Un bordo rosa indica la proprietà degli stili di centratura
- La casella grigia è lo sfondo del contenitore che cerca di avere elementi centrati
- Ogni elemento secondario ha un colore di sfondo bianco, in modo da poter vedere eventuali effetti della tecnica di centratura sulle dimensioni delle caselle secondarie.
I 5 concorrenti
5 tecniche di centratura entrano nel campionato della resilienza, solo una riceverà la corona della resilienza 👸.
1. Centro contenuti
- Squish: fantastico.
- Squash: fantastico.
- Duplica: ottimo.
- Modifica: ottimo.
- Flow: ottimo.
Sarà difficile battere la concisione di display: grid
e la sigla place-content
. Poiché centra e giustifica collettivamente gli elementi secondari,
si tratta di una tecnica di centratura solida per gruppi di elementi destinati alla lettura.
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- I contenuti sono centrati anche in spazi limitati e in caso di overflow
- Le modifiche e la manutenzione del centro sono tutte in un unico posto
- La spaziatura garantisce una spaziatura uguale tra n bambini
- La griglia crea righe per impostazione predefinita
- L'elemento secondario più largo (
max-content
) imposta la larghezza per tutti gli altri. Scopri di più su questo argomento in Gentle Flex.
Ideale per macro layout contenenti paragrafi e titoli, prototipi o, in generale, elementi che richiedono un centro leggibile.
2. Flessione dolce
- Squish: ottimo.
- Squash: ottimo.
- Duplica: ottimo.
- Modifica: fantastico.
- Flusso: ottimo.
La strategia Gentle Flex è una strategia di centratura soltanto più realistica. È morbido e delicato, perché, diversamente da place-content: center
, le dimensioni delle caselle per bambini non vengono modificate durante il centratura. Con la massima delicatezza possibile, tutti gli elementi vengono impilati, centrati e distanziati.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Gestisce solo allineamento, direzione e distribuzione
- Modifiche e manutenzione sono tutte in un unico posto
- La spaziatura garantisce una spaziatura uguale tra n bambini
- Maggior numero di righe di codice
Ideale sia per i layout macro che micro.
3. Autobot
- Squish: ottimo
- Squash: ottimo
- Duplica: fine
- Modifica: ottimo
- Flusso: ottimo
Il contenitore è impostato su flessibile senza stili di allineamento, mentre gli elementi figlio diretti sono impostati con i margini automatici. C'è qualcosa di nostalgico e meraviglioso nel lavorare su tutti i lati dell'elemento.margin: auto
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- Trucchetto divertente
- Veloce e sporco
- Risultati indesiderati in caso di overflow
- Il fatto di fare affidamento sulla distribuzione anziché sulla distanza significa che i layout possono avere bambini che toccano i lati
- L'essere "spinto" in posizione non sembra ottimale e può comportare una modifica delle dimensioni della scatola del bambino
Ideale per centrare icone o pseudo-elementi.
4. Centro soffice
- Squish: cattivo
- Squash: non valido
- Duplica: non valido
- Modifica: fantastico.
- Flusso: ottimo. (a condizione che tu utilizzi proprietà logiche)
Il concorrente "centro morbido" è di gran lunga il nostro concorrente dal suono più gradevole ed è l'unica tecnica di centratura interamente di proprietà dell'elemento/elemento secondario. Guarda il nostro bordo interno solo rosa.
.fluffy-center {
padding: 10ch;
}
- Protegge i contenuti
- Atomico
- Ogni test contiene segretamente questa strategia di centratura
- Lo spazio tra le parole è un a capo
- Illusione di non essere utile
- C'è un conflitto tra il contenitore e gli articoli, naturalmente poiché ognuno ha dimensioni molto precise
Ideale per centratura in base a parole o frasi, tag, pillole, pulsanti, chip e altro ancora.
5. Pop & Plop
- Squish: ok
- Squash: ok
- Duplica: non valido
- Modifica: fine
- Flusso: fine
Questo "si apre" perché il posizionamento assoluto fa uscire l'elemento dal normale flusso. La parte "plop" dei nomi deriva dal momento in cui lo trovo più utile: lo inserisco sopra altre cose. Si tratta di una tecnica di centratura dell'overlay classica e pratica, flessibile e dinamica in base alle dimensioni dei contenuti. A volte è sufficiente inserire un'interfaccia utente sopra un'altra.
- Utile
- Affidabile
- Quando ne hai bisogno, è inestimabile
- Codice con valori percentuali negativi
- Richiede
position: relative
per forzare un blocco contenente - Interruzioni di riga inopportune e anticipate
- Può essercene solo uno per blocco contenente senza ulteriore impegno
Ottimi per finestre modali, popup e messaggi, effetti di profondità e in pila, popup.
Il vincitore
Se fossi su un'isola e potessi avere una sola tecnica di centratura, sarebbe…
[rullio di tamburi]
Gentle Flex 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
Puoi sempre trovarlo nei miei fogli di stile perché è utile sia per i layout macro che per quelli micro. È una soluzione affidabile a tutto tondo con risultati in linea con le mie aspettative. Inoltre, dato che sono un appassionato di dimensionamento intrinseco, tendo a passare a questa soluzione. È vero, è molto da digitare, ma i vantaggi che offre superano il codice aggiuntivo.
MVP
Fluffy Center
.fluffy-center {
padding: 2ch;
}
Fluffy Center è così micro che è facile ignorarlo come tecnica di centratura, ma è un elemento fondamentale delle mie strategie di centratura. È così atomico che a volte mi dimentico di usarlo.
Conclusione
Quali tipi di elementi compromettono le tue strategie di centratura? Quali altre sfide potrebbero essere aggiunte al campanello di resilienza? Ho preso in considerazione la traduzione e un pulsante per l'altezza automatica del contenitore… cos'altro?
Ora che sai come ho fatto, come faresti? Diversifichiamo i nostri approcci e scopriamo tutti i modi per creare sul web. Segui il codelab associato a questo post per creare il tuo esempio di centratura, proprio come quelli in questo post. Twitta la tua versione e la aggiungerò alla sezione Remix della community di seguito.
Remix della community
- Trucchi CSS con un post del blog