Web Design: CSS3 e l’allineamento verticale di testo ed elementi

Un classico: l’allineamento verticale nell’epoca a.C. ( avanti CSS3 )

Questo articolo non vuole essere blasfemo, ma chi ha attraversato entrambi i periodi del Web Design può capire benissimo quali erano i limiti di allora e quali sono i vantaggi di oggi.

Prima dell’avvento del CSS3, alcune operazioni apparentemente semplici, come può sembrare un allineamento verticale, risultavano piuttosto rognose. Un esempio classico era quello di avere diverse colonne corredate ognuna da immagine e didascalia in sovraimpressione. Ecco, qui veniva il bello: non sempre il testo era della stessa lunghezza degli altri all’interno del proprio contenitore, quindi in linea generale le didascalie non occupavano gli spazi tutte allo stesso modo e ciò rendeva il layout poco armonioso agli occhi dell’utente. 

In un contenitore, per centrare orizzontalmente il testo bastava un text-align:center, ma per centrare lo stesso testo verticalmente, beh, si doveva sbattere un pò la testa. Talvolta, si usava ricorrere alle care vecchie tabelle (perdendo di flessibilità), altre volte a degli escamotage CSS incompatibili con determinati browser, altre ancora, invece, ricorrendo addirittura a dei calcoli JavaScript (perdendoci leggermente in performance e tempo).

L’allineamento verticale nell’epoca d.C. ( dopo CSS3 )

Fortunatamente, hanno pensato bene di portare ad un altro livello tutti gli strumenti utili ad un Web Designer introducendo il CSS3 e indicando ai vari browser la giusta direzione verso le nuove tecnologie. Il CSS3 per uno sviluppatore è come un nuovo set di pennelli in legno per un pittore, una tavolozza piena di nuovi colori e una nuova tela su cui dipingere, insomma, un upgrade vero e proprio. 

Non voglio annoiarvi nell’elencare tutte le innovazioni che ha portato il CSS3, per questo c’è già abbondante materiale online. Passiamo subito all’atto pratico e centriamo verticalmente il nostro testo all’interno del suo contenitore.

Definendo un contenitore con id #container, ci bastano poche semplici regole: 

#container {
   height: 350px;
   display: flex;
   align-items: center;
   justify-content: center;
}

Ecco, il gioco è fatto. La regola justify-content viene utilizzata per centrare il testo anche orizzontalmente, poiché con il display:flex, altro strumento utilissimo, il text-align:center applicato direttamente sul contenitore non ha effetto, ma questo è un altro discorso.

Conclusioni e considerazioni

Il mondo del Web va veloce e cresce la necessità di avere delle soluzioni rapide per ovviare alle continue richieste di un mondo responsive fatto di dispositivi diversi, display diversi e risoluzioni diverse. Per quanto mi riguarda, questo è un esempio molto banale dei vantaggi del CSS3 e potremmo star qui ad elencarne altri centinaia. Da anni ormai i Web Designer sfruttano tutto il potenziale messo a disposizione da questa tecnologia ed è giusto che lo facciano anche a scapito di browser obsoleti perchè, alla fin dei conti, i principali browser si aggiornano di continuo permettendoci una compatibilità cross-browser non da poco, mentre, noi sviluppatori di certo non vogliamo star qui a scrivere del CSS compatibile con Internet Explorer 8 😁.

Link Utili

Display Flex: https://www.w3schools.com/css/css3_flexbox.asp

Align Items: https://www.w3schools.com/cssref/css3_pr_align-items.asp