Come Centrare il Testo in HTML

Co-redatto da Nicole Levine, MFA

Questo articolo spiega come allineare al centro il testo all'interno di una pagina web utilizzando i fogli di stile CSS. È possibile farlo anche utilizzando il tag HTML <center>, ma si tratta di una procedura considerata obsoleta che non viene più supportata dalle versioni più aggiornate dei browser internet più diffusi.^{[1]
X
Fonte di ricerca}

Metodo 1

Metodo 1 di 2:
Usare i CSS

1
Apri il file che contiene il codice dei tuoi fogli di stile CSS. Dato che il tag HTML <center> è obsoleto e non più supportato, dovrai creare un nuovo elemento di stile con cui potrai formattare qualsiasi parte della struttura delle pagine web, in modo che il testo in essa contenuto venga allineato al centro. Se non hai creato un file CSS distinto dal resto degli elementi del sito, dovrai inserire una sezione dedicata alla formattazione dei contenuti nella parte superiore di ogni file HTML utilizzando i tag "<style>" e "</style>".^{[2]
X
Fonte di ricerca}

Pubblicità

Se non hai ancora utilizzato i tag <style> e </style>, aggiungili direttamente dopo il tag <body> posizionato nella parte superiore del codice HTML, che dovrebbe avere una struttura simile alla seguente:
```
<!DOCTYPE html>
<html>
<body>
<style>

</style>
```

Crea una nuova classe che si occupi di centrare il testo. Il tag HTML <div> indica al browser di fare riferimento a una sezione specifica del testo presente nella pagina, quindi puoi utilizzarlo per creare la nuova classe. Inserisci il seguente codice all'interno dei due tag "style", avendo cura di premere il tasto Invio 2 volte dopo la parentesi graffa aperta:

div.a {

}

Aggiungi il parametro text-align. Digita l'attributo text-align: center; all'interno delle parentesi graffe della classe div.a. A questo punto il codice dovrebbe essere simile al seguente:

<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>

Adesso usa il tag div e la classe appena creata per allineare il testo che desideri. Aggiungi il codice <div class="a"> prima della porzione del testo che desideri appaia allineata al centro, quindi inserisci l'apposito tag di chiusura </div> alla fine del testo. Per esempio, per allineare al centro il testo di un paragrafo, dovrai seguire queste istruzioni:

<div class="a">

<h1>Benvenuto sul mio sito web</h1>
<p>Questo sito web è stato creato principalmente per fornire informazioni.</p>

</div>

Usa la classe di stile div.a per formattare altre aree della pagina o del sito. Per allineare al centro un altro elemento testuale (per esempio la porzione di testo presente all'interno di tag come <p></p> e <h2></h2>), inserisci il codice <div class="a"> prima di queste sezioni e il tag </div> subito dopo. Dato che la classe di stile "div.a" è già stata dichiarata come comando per allineare il testo al centro, qualsiasi contenuto testuale della pagina web verrà allineato al centro rispetto al punto in cui viene visualizzato.

<style>
div.a {
	text-align: center;
}
</style>

<div class="a">

<h2>Le donazioni sono ben accette.</h2>
<p>Grazie.</p>

</div>

Esamina il codice che hai creato finora. Anche se i contenuti della pagina web variano, il codice HTML dovrebbe essere simile al seguente:^{[3]
X
Fonte di ricerca}

<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>

<div class="a">
<h1>Benvenuto sul mio sito web</h1>
<p>Questo sito web è stato creato principalmente per fornire informazioni.</p>
</div>

<div class="a">
<h2>Le donazioni sono ben accette.</h2>
<p>Grazie.</p>
</div>

</body>
</html>

Metodo 2

Metodo 2 di 2:
Usare il Tag HTML Center

1
Apri il documento HTML da modificare. Questo metodo mostra come usare il tag HTML <center>. Ricorda che questo attributo è obsoleto, quindi potrebbe non essere più supportato dai browser internet moderni. Fino al dicembre 2018 alcuni browser lo supportavano ancora, ma in futuro le cose potrebbero cambiare senza preavviso.
2
Individua la porzione di testo che vuoi allineare al centro. Scorri il codice HTML della pagina finché non individui il titolo, il paragrafo o un altro elemento della pagina che contiene il testo da formattare.
3
Aggiungi l'attributo "center" su ogni lato della sezione del testo da formattare. Il tag "center" va usato con la seguente sintassi <center>[testo]</center>, dove il parametro "[testo]" rappresenta il contenuto testuale da formattare. Se il testo da allineare è racchiuso all'interno di altri tag (per esempio "<p></p>" nel caso di un paragrafo), i tag "center" devono racchiudere al loro interno anche gli eventuali tag già esistenti:
```
<center><h1>Benvenuto sul mio sito web</h1></center>
<center>Sentiti come a casa tua!</center>
```
4
Controlla il codice HTML del tuo documento. L'aspetto della struttura della pagina web che hai modificato dovrebbe essere simile al seguente:^{[4]
X
Fonte di ricerca}
```
<!DOCTYPE html>
<html>
<body>
<center><h1>Benvenuto sul mio sito web</h1></center>
<center>Sentiti come a casa tua!</center>
<p>Questo sito web è stato creato principalmente per fornire informazioni.</p>
</body>
</html>
```
Pubblicità