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>