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

Probabilmente, chi ha iniziato a masticare il Web poco meno di un decennio fa ricorda quanto fosse ostico riuscire a rendere un layout armonioso, mantenendo allo stesso tempo la flessibilità e la leggerezza richiesta da un mondo, quello responsive, che man mano avanzava.

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

 

 

Valentino Orlando

Leggi anche questi articoli

Lead Generation: creare conversazioni per generare contatti qualificati

Per farsi strada in un mondo sempre più affollato e riuscire a catturare l’attenzione di persone che mostrano un reale interesse verso la tua ...
Alessia Nuzzo

Link nelle storie di Instagram: presto disponibile per tutti!

Fin dalla sua uscita Instagram si è saputo fare apprezzare per la grande attrattiva rappresentata anche come strumento di marketing, taleà ...
Federico Petracca

Come migliorare l’esperienza d’acquisto da mobile

Acquistare on line è ormai diventata un’abitudine consolidata anche in Italia: a testimoniarlo sono i numeri del settore eCommerce che, ...
Alessia Nuzzo
CHIAMA SCRIVICI