Questo sito contribuisce alla audience di Il Messaggero

Come centrare il testo HTML

di

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 dei vari tag e attributi HTML utilizzabili per centrare un 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

Centrare il testo in HTML con l’attributo align

Se vuoi centrare il testo HTML, non devi far altro che imparare a usare correttamente l’attributo align, che può essere utilizzato in molteplici contesti: grazie a esso, è infatti possibile allineare testi, immagini, tabelle e quant’altro. Scopriamo insieme come inserirlo sia all’interno del tag <p> che nel tag <div>.

Tag <p>

Per ottenere un testo allineato al centro tramite l’attributo align e il tag <p>, devi procedere come segue: apri innanzitutto il tuo editor HTML preferito, inserisci il tag <p> (che nel caso tu non lo sapessi sta per paragraphparagrafo in italiano) seguito dall’attributo align e dall’attributo corrispondente allo stile di formattazione desiderato, ovvero center (centrato) racchiuso fra virgolette. Nella fattispecie il codice da utilizzare per ottenere il risultato desiderato è il seguente.

<p align=”center”>Testo di prova</p>

Utilizzando il codice che ti ho appena indicato potrai ottenere il risultato che vedi di seguito, ossia un testo perfettamente allineato al centro della pagina in cui è inserito.

Testo di prova

Con la stessa tecnica, puoi anche allineare il testo a sinistra, a destra o persino giustificarlo. Per procedere, non devi fare altro che sostituire align=”center” con uno dei seguenti attributi.

  • align=”left” — se hai intenzione di allineare il testo a sinistra.
  • align=”right” — se desideri allineare il testo a destra.
  • align=”justify” — se, invece, hai intenzione di giustificare il testo.

Tag <div>

Come ti dicevo poc’anzi, è possibile centrare il testo in HTML anche utilizzando il tag <div> che, come forse già saprai, si distingue da quello analizzato precedentemente per il fatto che non crea dei paragrafi (quindi non lascia una riga vuota alla sua fine) e può essere usato come un contenitore generico per molteplici elementi, quindi non solo contenuti testuali ma anche tabelle, immagini e quant’altro.

Per ottenere un testo centrato con il tag in questione, anche in questo caso non devi fare altro che aprire l’editor HTML che stai utilizzando per realizzare “a mano” la tua pagina Web, inserire il tag <div> seguito dall’attributo align e specificare fra virgolette lo stile di formattazione desiderato, in questo caso center, ovvero centrato. Di seguito trovi un esempio pratico che ti sarà utile per capire ancora meglio come procedere.

<div align=”center”>Testo di prova</div>

Il codice in questione ti permetterà di ottenere il seguente risultato, ossia un testo perfettamente allineato al centro della pagina in cui è inserito:

Testo di prova

Anche il tag <div> non si limita a centrare il testo, ma può essere usato anche per allineare i testi a sinistra, a destra o a giustificarli. Basta sostituire l’attributo align=”center” con uno di quelli che elencati di seguito.

  • align=”left” — se hai intenzione di allineare il testo a sinistra.
  • align=”right” — se vuoi allineare il testo a destra.
  • align=”justify” — se, invece, desideri giustificare il testo.

Ad ogni modo, per motivi di “pulizia” del codice, ti consiglio di utilizzare sempre il tag <p> (soprattutto per quanto riguarda i testi) e non il tag <div>. Intesi?

Centrare il testo in HTML con il tag center

Un altro modo per centrare il testo in HTML è quello di ricorrere all’uso del tag center, che offre il vantaggio di poter centrare più paragrafi per volta. Tutto quello che devi fare per utilizzarlo è aprire l’editor HTML che stai usando per esercitarti, inserire il tag <center> seguito dal testo che vuoi centrare e dal tag di chiusura </center>, che va inserito nel punto della pagina in cui si vuole interrompere l’uso della formattazione centrata.

Se vuoi centrare un solo paragrafo, ad esempio, puoi procedere come vedi nel seguente esempio.

<center>

<p>Testo d’esempio</p>

</center>

Il risultato che otterrai sarà il seguente.

Testo d’esempio

Se, invece, vuoi centrare più paragrafi per volta, non devi fare altro che racchiuderli tutti all’interno del tag <center>. Questo è uno dei vantaggi nell’utilizzare questo tag al posto dell’attributo align (che avresti dovuto inserire all’interno di ciascun tag <p> per ottenere il medesimo risultato). Se vuoi centrare più paragrafi, quindi, procedi nel seguente modo.

<center>

<p>Testo d’esempio paragrafo n. 1</p>

<p>Testo d’esempio paragrafo n. 2</p>

<p>Testo d’esempio paragrafo n. 3</p>

<p>Testo d’esempio paragrafo…</p>

</center>

Il risultato che otterrai utilizzando il codice che ti ho appena indicato saranno dei paragrafi allineati tutti al centro della pagina in cui sono inseriti, come puoi vedere nell’esempio riportato di seguito.

Testo d’esempio paragrafo n. 1

Testo d’esempio paragrafo n. 2

Testo d’esempio paragrafo n. 4

Testo d’esempio paragrafo…

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 dei tag e degli attributi 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.