# Centrer un texte en HTML : comment s’y prendre sans la balise ?

La balise (*tag*) `<center>` pour centrer le texte en HTML a été supprimée avec HTML5. On utilise maintenant le CSS : comme le paramètre requis `text-align` est déjà défini dans la balise `<style>`, le code devient plus clair et les erreurs peuvent être évitées !

## Centrer du texte en HTML : comment faire ?

Pour le *HTML Centering*, c’est-à-dire le centrage de textes dans un document HTML, on utilise aujourd’hui la [commande CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/les-commandes-css/) `text-align`. Cette instruction permet de formater le texte horizontalement. Pendant longtemps, la balise HTML `<center>`, désormais obsolète, a été utilisée à cet effet. Cette méthode n’est cependant plus supportée depuis [HTML5](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html5-cest-quoi/)\*\*.

## Centrer un texte avec `text-align` en CSS

Depuis HTML5, vous enregistrez l’instruction de centrer un texte en HTML dans la [balise `<style>`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-html-style/). Nous pouvons illustrer ce processus le plus simplement possible à l’aide d’un petit exemple. Dans le code suivant, nous centrons le titre, le texte et un conteneur [HTML `<div>`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-div/) dans notre document HTML :

```html

<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Voici votre titre</h1>
<p>Ici, il y a de la place pour votre contenu.</p>
<div>Il y a une div à cet endroit.</div>
<div class="hash d-none" hidden>hash_778c06a7b715d894260ffa1ebd2b06412cea46dc</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 structure du document est donc déjà définie en amont. Cela permet de garder le code clair et d’éviter les erreurs.

## HTML `<center>` : tag obsolète depuis HTML5

Dans les anciennes versions du langage de programmation Web, on utilisait la [balise HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/) `<center>`, que nous souhaitons également vous montrer dans cet article. Comme elle est obsolète et n’est plus supportée, vous devriez toutefois **impérativement recourir à la solution CSS**. La syntaxe de `<center>` pour le texte HTML était la suivante :

```html
<center><p>Texte</p></center>
```

Dans l’exemple ci-dessous, vous pouvez voir comment la balise HTML `<center>` était utilisée exactement dans la pratique. Contrairement à la solution moderne, il fallait modifier le code directement dans le [corps du texte](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-body/) pour le centrer. Selon le volume et la structure, cela conduisait à un **code peu clair** et était, en comparaison, nettement plus sujet aux erreurs :

```html

<html>
<body>
<p>Ici se trouve un texte qui n’a pas été centré.</p>
<center><p>Ici se trouve un texte qui a été centré.</p></center>
<div class="hash d-none" hidden>hash_778c06a7b715d894260ffa1ebd2b06412cea46dc</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>
```

Le résultat se présente alors comme suit :

[![Image: HTML  : exemple](https://www.ionos.fr/digitalguide/fileadmin/_processed_/a/d/csm_centrer-texte-html_82fb5fc45c.webp "HTML  : exemple")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/centrer-texte-html.png) Dans l’exemple, on voit que le texte à l’intérieur de la balise  est centré.  Conseil Vous trouverez tout ce qu’il faut savoir sur l’[*Hypertext Markup Language* (HTML)](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-html/) dans notre Digital Guide. Nous vous y expliquons également comment faire vos [premiers pas avec HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/apprendre-le-html-le-tutoriel-pour-debutant/). De même, si vous vous demandez comment [intégrer du CSS dans une page HTML](https://www.ionos.fr/digitalguide/sites-internet/web-design/integrer-du-css-dans-une-page-html/), nous vous proposons le tutoriel idéal avec de nombreux exemples pratiques !


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/centrer-un-texte-en-html/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/centrer-un-texte-en-html/) for AI/LLM consumption.