back to top

Come centrare il testo in HTML

Centrare un testo in HTML è una procedura piuttosto semplice, anche se non si dispone di un editor WYSIWYG (acronimo di what you see is what you get, cioè “quello che vedi è quello che ottieni”) ma si deve necessariamente intervenire sul codice sorgente della pagina web per gestire l’allineamento degli elementi.

La centratura di un testo in una pagina web, infatti, richiede giusto un minimo di dimestichezza con il codice HTML, i suoi tag ed attributi. Vediamo, di seguito, diversi modi con i quali è possibile centrare un testo in HTML.

Centrare un testo con l’attributo align

L’utilizzo dell’attributo align è sicuramente la tecnica più ricorrente (se avete già fatto qualche ricerca in rete ve ne sarete già accorti) ma è bene avvisare il lettore che il suo utilizzo è da considerarsi deprecato con l’avvento delle nuove specifiche di HTML5.

Il fatto che sia depreacata non significa che non funzioni: la stragrande maggioranza dei browser, infatti, non ha nessun problema nell’interpreatre correttamente il funzionamento dell’attributo align.

Vediamo di seguito, quindi, come utilizzare l’attributo align per centrare un testo:

<p align="center">testo centrato in HTML</p>

Come potete vedere abbiamo aggiunto al tag <p> l’attributo align con valore “center” che equivale a dire “centra il contenuto di questo paragrafo”.

Da segnalare, ancora, che abbiamo utilizzato l’attributo in oggetto applicandolo ad un paragrafo, ma nulla vieta di utilizzarlo con altri tag HTML come, ad esempio, il tag <div>.

Centrare un testo mediante il tag <center>

Un’altra tecnica molto diffusa per centrare testo (ma non solo) in HTML consiste nell’utilizzo del tag <center>. Anche in questo caso si tratta di una tecnica obsoleta in quanto il tag <center> non è supportato da HTML5. Ancora una volta, tuttavia, la pratica è diversa dalla teoria: tutti i browser oggi in commercio, infatti, riconoscono questo tag applicando l’effetto di centratura:

<center>
  <p>testo centrato in HTML</p>
</center>

Centrare un testo con i CSS

Terzo modo per centrare un testo all’interno di una pagina HTML… consiste nell’utilizzare i CSS! Questa è la tecnica corretta se si vuole sviluppare pagine web moderne e compatibili coi nuovi standard. Centrare un testo coi CSS prevede che l’effetto di centratura sia applicato non dal markup HTML ma dal foglio di sitile (che è esattamente quello che ha previsto il W3C in merito alla separazione tra struttura e presentazione).

Per centrare il testo con CSS utilizzeremo:

<p style="text-align:center">testo centrato in HTML</p>

Come potete notare l’allineamento del testo è ottenuto mediante l’attributo style al cui interno è stata inserita la proprietà CSS text-align con valore “center”.

Nel nostro esempio abbiamo utilizzato dei CSS in linea, ma nulla vieta (in alternativa all’esempio visto sopra) di creare una classe ad hoc all’interno del nostro foglio di stile:

.testo-centrato {
  text-align: center;
}

da utilizzare in questo modo nel sorgente della pagina:

<p class="testo-centrato">testo centrato in HTML</p>

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).
Articolo precedente
Articolo successivo

Leggi anche...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltà quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...
Pubblicità