# Centrare il testo in HTML ricorrendo al linguaggio CSS

Il tag `<center>` per centrare il testo in HTML è stato abolito con HTML5. Da allora, per effettuare questa operazione si utilizzano i CSS. Poiché il parametro richiesto `text-align` definisce già la struttura del documento nel tag `style`, il codice è più chiaro e si possono evitare errori.

## Come centrare il testo in HTML

Oggi, il [comando CSS](https://www.ionos.it/digitalguide/siti-web/web-design/comandi-css/) `text-align` è utilizzato per centrare il testo in HTML. Questa istruzione viene utilizzata per formattare il testo in orizzontale. Per molto tempo, a questo scopo è stato usato il tag HTML `<center>`, ormai obsoleto. Questo metodo **non è più supportato** da quando è stato introdotto [HTML5](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/).

## Centrare in HTML con `text-align` in CSS

Da HTML5, l’istruzione di centrare un testo in HTML viene memorizzata nel [tag style](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-style-html/). Il modo più semplice per illustrare questo processo è con un piccolo esempio. Nel codice seguente, centriamo il titolo, il testo e un contenitore [HTML div](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-div/) nel nostro documento HTML:

```html

<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Qui c'è il titolo</h1>
<p>Qui vanno inseriti i contenuti.</p>
<div>In questo punto si trova un contenitore div.</div>
<div class="hash d-none" hidden>hash_49839b453aa3b2e624d9cbf3699787525e9209fb</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

La struttura del documento è quindi già definita in anticipo. In questo modo ci si assicura che il codice risulti chiaro e che non vi siano errori.

## Il tag HTML `<center>`, ormai obsoleto

Nelle vecchie versioni di questo linguaggio veniva utilizzato il [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) `<center>`, che ti mostreremo qui per completezza. Tuttavia, poiché è obsoleto e non più supportato, si dovrebbe **assolutamente utilizzare la soluzione fornita in CSS**. La sintassi di `<center>` per il testo HTML è la seguente:

```html
<center><p>Testo</p></center>
```

Nell’esempio seguente, puoi vedere esattamente come veniva utilizzato in pratica il tag HTML `<center>`. A differenza della soluzione moderna, il codice doveva essere modificato direttamente nel [body](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-body/) per centrare il testo in HTML. A seconda dell’ambito e della struttura, questo portava a un **codice disordinato** ed era, in proporzione, molto più soggetto a errori:

```html

<html>
<body>
<p>Qui c'è un testo non centrato.</p>
<center><p>Qui c'è un testo centrato.</p></center>
<div class="hash d-none" hidden>hash_49839b453aa3b2e624d9cbf3699787525e9209fb</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Il risultato è simile a questo:

[![Immagine: Esempio di testo HTML centrato](https://www.ionos.it/digitalguide/fileadmin/_processed_/7/a/csm_esempio-testo-centrato-html_093f70e406.webp "Esempio di testo HTML centrato")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/esempio-testo-centrato-html.png) Nell’esempio si può notare che il testo è posizionato al centro racchiuso all’interno del tag center.  Consiglio Nella nostra Digital Guide scopri tutto quello che c’è da sapere sull’[Hypertext Markup Language](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/). Qui, ad esempio, ti spieghiamo come muovere i [primi passi con l’HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/). Anche se ti stai chiedendo come [integrare CSS in HTML](https://www.ionos.it/digitalguide/siti-web/web-design/come-collegare-css-nei-documenti-html/), ti mettiamo a disposizione il tutorial giusto con molti esempi pratici.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/centrare-il-testo-in-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/centrare-il-testo-in-html/) for AI/LLM consumption.