Come centrare il testo HTML
Stai cercando di muovere i tuoi primi passi nel mondo della progettazione Web e vorresti una mano per realizzare un sito tramite codice, senza affidarti completamente agli editor visuali o a soluzioni automatizzate che si occupano di tutto quel che concerne la formattazione dei testi, delle immagini e quant’altro. Bene, allora credo che la guida che sto per proporti potrebbe fare proprio al caso tuo.
Stiamo infatti per scoprire insieme come centrare il testo HTML utilizzando esclusivamente il codice, nella fattispecie alcuni tag e attributi HTML tramite i quali centrare il testo presente in una pagina Web. In questo modo, anche in assenza di strumenti ben più semplici da utilizzare (oltre che più pratici), come gli editor WYSIWYG (acronimo di what you see is what you get, quello che vedi è quello che ottieni, quindi editor di tipo visuali) saprai esattamente dove e come andare ad agire per allineare il testo presente nelle pagine Web che realizzerai “manualmente”.
Allora, sei pronto per iniziare? Sì? Benissimo! Mettiti bello comodo, prenditi tutto il tempo necessario per concentrarti sulla lettura dei prossimi paragrafi e, cosa ancora più importante, metti in pratica le indicazioni che ti darò in merito all’utilizzo delle varie proprietà HTML/CSS utilizzabili per centrare il testo di una pagina Web. Vedrai, una volta che avrai compreso il loro funzionamento, riuscirai a padroneggiarli senza alcun problema. A me non resta altro da fare che augurarti buona lettura e, soprattutto, buon divertimento!
Indice
Come centrare il testo HTML: CSS
Fino a qualche tempo fa, era possibile centrare il testo di una pagina Web sia racchiudendo il testo (o gli elementi) sui quali intervenire tra i tag <center> e </center>, sia applicando l’attributo align="center" ai vari tag contenitori, come <div></div>, <span></span>, <p></p>, <th></th>, <td></td> e così via.
Con l’avvento di HTML5, però, sia il tag <center> che l’attributo align sono stati deprecati e, pertanto, potrebbero funzionare correttamente su alcuni browser ed essere completamente ignorati da altri, con conseguenti problemi nella visualizzazione del sito.
Per ovviare al problema, si può definire l’allineamento del testo tramite CSS, dichiarando la proprietà text-align: detto in soldoni, bisogna racchiudere il testo da centrare all’interno di un apposito tag contenitore e aggiungere, a quest’ultimo, l’attributo style (che istruisce il “motore” a interpretare come CSS tutto quanto racchiuso tra virgolette) accompagnato dalla proprietà text-align. Per esempio, se vuoi centrare il testo contenuto in un dato paragrafo, puoi scrivere quanto segue.
<p style="text-align:center;">Qui risiede un testo centrato.</p>
Se non vuoi creare un paragrafo, puoi applicare lo stesso stile anche al tag <div> (che crea un box di separazione, senza però applicare spaziature all’inizio o alla fine), al tag <span> (usato appositamente per la formattazione del testo senza delimitazione alcuna), al tag <li> (che contiene un elemento di una lista puntata/numerata), al tag <td> (che denota il contenuto di una cella di una tabella) e, in generale, a tutti gli altri tag contenitori predisposti ad ospitare del testo.
In alternativa, puoi creare una classe CSS da incorporare all’interno dell’header della pagina, usando il tag <style>, da applicare a qualsiasi elemento tu voglia centrare. Di seguito ti propongo un esempio di codice simile.
<!DOCTYPE html>
<head>
<title>La mia pagina di prova</title>
<style>
.centrato {text-align: center;}
</style>
<head>
<body>
<p class="centrato">Questo testo sarà centrato.</p>
</body>
Chiaramente, puoi dichiarare le classi CSS anche all’interno di un foglio di stile separato, con estensione .CSS (che puoi importare nella pagina HTML inserendo il tag <link rel="stylesheet" href="nomeFoglio.css"> tra i tag <head> e </head>). All’interno di ciascuna classe, a prescindere da come sarà dichiarata, si possono definire elementi aggiuntivi che caratterizzano il testo o, in generale, gli elementi racchiusi all’interno del tag al quale verrà applicata (ad es. color per il colore del font, background-color per il colore di sfondo dell’elemento e così via).
Come centrare verticalmente testo HTML
Come dici? Ti interessa centrare verticalmente il testo rispetto all’elemento contenitore in cui risiede (ad es. una cella o un elemento divisorio)? Si può fare e, anche in questo caso, ci viene in aiuto il CSS.
Per la precisione, andremo a usare il modulo dei box flessibili di CSS (denominato flexbox), il quale consente di definire il posizionamento degli elementi all’interno di un dato tag contenitore. Il vantaggio, rispetto ai layout con modulo table, block, inline e positioned, consiste nell’assenza della proprietà float e del posizionamento assoluto, il che rende la centratura corretta anche in caso di pagine Web responsive (che si adattano cioè sia ai piccoli che ai grandi schermi).
All’atto pratico, il mio consiglio è quello di dichiarare la centratura verticale in una classe CSS, all’interno del tag <style> della pagina (che, ti ricordo, va dichiarato nell’header), usando un codice simile a quello che ti mostro qui di seguito.
<style>
.centravert {
display: flex;
align-items: center;
height: 100px; }
</style>
Chiaramente, puoi definire la medesima classe anche in un foglio di stile esterno, avendo cura di eliminare il tag <style>.
Nel dettaglio, la proprietà display consente di definire il layout dell’elemento contenitore (in questo caso, flex); la proprietà align-items specifica l’allineamento degli elementi contenuti (ad es. il testo) rispetto all’asse verticale; e la proprietà height consente di definire la distanza tra l’elemento allineato (in questo caso, il testo) e i margini superiore e inferiore dell’elemento contenitore.
In più, aggiungendo al codice precedente la proprietà justify-content: center;, si può far sì che il testo venga centrata anche orizzontalmente. Dunque, per creare una pagina Web che contenga una frase centrata sia in orizzontale che in verticale rispetto a un box contenitore (del quale, per comodità, andremo a rendere visibili i margini mediante la proprietà border), scriveremo quanto segue.
<!DOCTYPE html>
<head>
<title>La mia pagina di prova</title>
<style>
.centrato {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
border: 5px solid black;}
</style>
<head>
<body>
<div class="centrato">Questo testo sarà centrato orizzontalmente e verticalmente rispetto al box che lo contiene.</div>
</body>
E con questo è tutto! Ora che conosci quali sono le regole fondamentali per centrare un testo in HTML non devi fare altro che esercitarti, esercitarti e, ancora, esercitarti! Così facendo, acquisterai sempre maggiore dimestichezza nell’uso delle proprietà di cui ti ho parlato in questa guida e potrai formattare i testi da inserire nella tua pagina Web senza alcuna difficoltà. A tal proposito, ti consiglio di consultare anche la mia guida su come creare un sito in HTML, all’interno della quale ti ho spiegato più in dettaglio come costruire un sito usando il solo codice HTML e CSS.
Nota: il layout flexbox è supportato dalla quasi totalità dei browser più diffusi (a partire da Google Chrome 29.0, Microsoft Edge 11.0, Mozilla Firefox 22.0, Safari 10 e Opera 48), ma non da Internet Explorer 10 e precedenti.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
