Comment centrer du texte et des en-têtes en CSS à l’aide de la propriété Text-Align
Le centrage du texte avec CSS peut donner à votre page un aspect organisé et symétrique, tout en attirant l’attention du visiteur sur des éléments particuliers de la page. Par exemple, les titres, les guillemets et les appels à l’action sont souvent centrés pour perturber le flux du document et attirer l’attention du lecteur.
Pour vous assurer que vous comprenez ce type d’alignement courant, nous allons d’abord expliquer comment centrer le texte horizontalement. Ensuite, nous examinerons quelques façons de centrer le texte verticalement.
Sommaire
Comment centrer du texte en CSS
Pour centrer du texte en CSS, utilisez la propriété text-align et définissez-la avec la valeur « center« . Vous pouvez utiliser cette technique à l’intérieur des éléments de bloc, tels que les divs.
Vous pouvez également centrer le texte en HTML, ce qui est utile si vous souhaitez uniquement centrer des éléments individuels sur la page web. Mais si vous souhaitez centrer un type d’élément, comme tous les H1 de votre blog, il est préférable de le faire en CSS.
Centrer le texte en CSS
Ci-dessous, nous passons en revue plusieurs didacticiels pour centrer le texte à l’extérieur et à l’intérieur d’autres éléments.
Centrage du texte à l’aide de la propriété Text-Align
Commençons par un exemple simple. Supposons que vous ayez une page Web contenant uniquement du texte et que vous souhaitiez centrer tout le texte. Ensuite, vous pouvez utiliser le sélecteur universel CSS (*) ou le corps du sélecteur de type pour cibler chaque élément de la page. Ensuite, vous définiriez la propriété text-align sur center.
Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
body {
text-align: center;
}
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</body>
</html>
Voici un aperçu du résultat :
Centrer un élément de type HTML avec la propriété Text-Align
Que faire si vous ne voulez pas que tout le texte de la page soit centré, ou si votre page contient des images et d’autres éléments en plus du texte ? Dans ce cas, vous utiliseriez la même propriété text-align mais un sélecteur CSS différent.
Par exemple, supposons que vous souhaitiez que les titres soient centrés sur une page, mais que les paragraphes soient alignés à gauche. Ensuite, vous utiliseriez le sélecteur de type h2 et définiriez la propriété text-align sur center. Vous n’avez plus besoin d’ajouter de code pour aligner les paragraphes – par défaut, ils seront alignés à gauche.
Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</body>
</html>
Voici un aperçu du résultat :
Centrage d’éléments individuels avec un ID CSS
Si vous souhaitez centrer un seul élément sur la page, vous pouvez ajouter un attribut d’ID à l’élément et le cibler avec un sélecteur d’ID. Ou, vous pouvez utiliser le CSS en ligne.
Commençons par utiliser un attribut ID et un sélecteur.
Voici le CSS :
<!DOCTYPE html>
<html>
<head>
<style>
#center {
text-align: center;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2 id="center">Comment centrer le texte en CSS</h2>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
<h2>Explication</h2>
Si vous souhaitez centrer un seul élément sur la page, vous pouvez ajouter un attribut d'ID à l'élément et le cibler avec un sélecteur d'ID. Ou, vous pouvez utiliser le CSS en ligne.
</body>
</html>
Voici un aperçu du résultat :
Centrer le texte à l’intérieur d’un bouton à l’aide de CSS en ligne
Utilisons maintenant le CSS en ligne. Mais au lieu de centrer les titres et les paragraphes, centrons le texte à l’intérieur d’un autre élément.
Supposons que je construis une page Web à l’aide de Bootstrap CSS et que j’ajoute un bouton Bootstrap que je souhaite centrer sur la page. L’alignement du bouton et du texte à l’intérieur du bouton différerait légèrement des exemples ci-dessus. En effet, la propriété text-align ne fonctionne que sur le contenu des éléments de niveau bloc, tels que les titres et les paragraphes, et non sur les éléments en ligne, tels que les boutons.
Donc, d’abord, je devrais envelopper le bouton dans une div. Ensuite, je pourrais appliquer le CSS en ligne à la div pour centrer le contenu à l’intérieur de la div.
Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
.btn{
background-color: #0068B1;
font-family: 'Lexend Deca', sans-serif;
text-transform: uppercase;
color: white;
padding: 20px;
width: 200px;
border-radius: 10px;
}
.btn:hover{
background-color: #408EC5;
}
</style>
</head>
<body>
<h2 id="center">Comment centrer le texte en CSS</h2>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
<h2>Explication</h2>
Si vous souhaitez centrer un seul élément sur la page, vous pouvez ajouter un attribut d'ID à l'élément et le cibler avec un sélecteur d'ID. Ou, vous pouvez utiliser le CSS en ligne.
<div style="text-align:center">
<button type="button" class="btn btn-primary">Click Me</button>
</div>
</body>
</html>
Voici un aperçu du résultat :
Centrer un bloc d’élément à l’aide de la propriété Margin
Si vous centrez un élément de bloc entier, tel qu’un div, la propriété text-align ne fonctionnera pas. (Notez que cela fonctionne lors du centrage du contenu à l’intérieur d’un div.) Au lieu de cela, vous pouvez utiliser la propriété margin pour centrer l’élément entier. Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
#center {
width: 400px;
margin: auto;
/* Optional Styling */
padding: 20px;
border-style: solid;
border-color: #B6C7D6;
border-radius: 20px;
background-color: #EAF0F6;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<div id="center">
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</div>
<h2>Explication</h2>
Si vous souhaitez centrer un seul élément sur la page, vous pouvez ajouter un attribut d'ID à l'élément et le cibler avec un sélecteur d'ID. Ou, vous pouvez utiliser le CSS en ligne.
</body>
</html>
Voici un aperçu du résultat :
Centrage du texte à l’intérieur d’un div
Disons que vous vouliez centrer un div et aussi centrer le texte à l’intérieur. Comme dans l’exemple précédent, ajoutez un sélecteur d’ID « centre » à la div que vous avez choisie, puis définissez la marge sur « auto ». Ensuite, ajoutez la déclaration « text-align: center« .
Voici à quoi cela ressemble :
<!DOCTYPE html>
<html>
<head>
<style>
#center {
width: 400px;
margin: auto;
text-align: center;
/* Optional Styling */
padding: 20px;
border-style: solid;
border-color: #B6C7D6;
border-radius: 20px;
background-color: #EAF0F6;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<div id="center">
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</div>
<h2>Explication</h2>
Si vous souhaitez centrer un seul élément sur la page, vous pouvez ajouter un attribut d'ID à l'élément et le cibler avec un sélecteur d'ID. Ou, vous pouvez utiliser le CSS en ligne.
</body>
</html>
Voici un aperçu du résultat :
Comme vous pouvez le constater à partir des exemples ci-dessus, la propriété text-align spécifie uniquement l’alignement horizontal du texte. Spécifier l’alignement vertical du texte est plus compliqué. Jetons un coup d’œil ci-dessous.
Aligner le texte verticalement
Vous pouvez centrer le texte verticalement de plusieurs façons. Pour les méthodes ci-dessous, le texte devra être contenu par un élément parent, comme un div. Commençons par le plus simple.
Notez que si vous souhaitez que votre texte soit également centré horizontalement, ajoutez simplement la propriété text-align et définissez-la sur center dans l’un des exemples ci-dessous.
Centrer verticalement le texte à l’aide du CSS Padding
L’une des solutions les plus simples pour centrer verticalement le texte consiste à utiliser un rembourrage (padding) supérieur et inférieur.
Pour appliquer un CSS padding à un élément, je peux utiliser la méthode de forme longue et définir à la fois les propriétés padding-top et padding-bottom dans mon CSS. Ou je peux utiliser un raccourci CSS sur la propriété padding et inclure trois valeurs : la première valeur représentera le rembourrage supérieur, la seconde représentera le rembourrage gauche et droit, et la troisième représentera le rembourrage inférieur.
Vous trouverez ci-dessous le code CSS utilisant la méthode abrégée :
<!DOCTYPE html>
<html>
<head>
<style>
/*Centering Code*/
.center {
padding: 50px 0 50px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<div>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</div>
<div class="center">
<p>Je suis verticalement centré .</p>
</div>
</body>
</html>
Voici le résultat :
Centrer verticalement le texte à l’aide de la propriété CSS Line-Height
Pour centrer verticalement du texte dans un élément, vous pouvez également utiliser la propriété CSS line-height. Vous devrez définir la propriété avec une valeur égale à la hauteur de l’élément conteneur.
Voici le CSS :
<!DOCTYPE html>
<html>
<head>
<style>
/*Centering Code*/
.center {
line-height: 150px;
height: 150px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<div>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</div>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
Voici le résultat :
Centrer verticalement le texte à l’aide des propriétés CSS Position et Transform
Une autre méthode pour centrer le texte verticalement sur une page nécessite la propriété CSS position et la propriété transform .
Pour commencer, définissez la position de la div contenant le texte sur relative. Ensuite, vous voulez styliser le paragraphe dans la div. Tout d’abord, définissez sa position sur absolue afin qu’elle soit retirée du flux de documents normal. Définissez ensuite les propriétés left et top sur 50 %. Cela indique au navigateur d’aligner le bord gauche et supérieur du paragraphe avec le centre de la page horizontalement et verticalement (c’est-à-dire 50 % vers la droite et vers le bas de la page). Le problème est que nous ne voulons pas que les bords du paragraphe soient alignés au milieu de la page – nous voulons que le centre du paragraphe soit aligné au milieu de la page.
C’est là qu’intervient la propriété ransform de CSS. En utilisant la méthode de transformation connue sous le nom de méthode translate(), nous pouvons déplacer le paragraphe le long des axes X et Y. Pour vraiment centrer le paragraphe, nous voulons le déplacer de 50 % vers la gauche et vers le haut par rapport à sa position actuelle. Cela indiquera au navigateur de placer le centre du paragraphe au centre de la page.
Voici le CSS :
<!DOCTYPE html>
<html>
<head>
<style>
.center {
position: relative;
height: 150px;
background: #FFCEC2;
}
.center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<p>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
Voici le résultat :
Centrer verticalement le texte à l’aide de Flexbox
Flexbox est l’une des meilleures méthodes pour centrer le texte verticalement (et horizontalement), car il est réactif et ne nécessite pas de calculs de marge.
Tout d’abord, vous devez définir le conteneur parent – dans ce cas, le div – en tant que conteneur flexible. Pour ce faire, définissez la propriété display sur « flex« . Ensuite, définissez les propriétés align-items et justify-content sur « center« . Cela indiquera au navigateur de centrer l’élément flexible (la div dans la div) verticalement et horizontalement.
Voici le CSS :
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #FFCEC2;
}
/* Styling */
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Lexend Deca', sans-serif;
color: #2E475D;
}
</style>
</head>
<body>
<h2>Comment centrer le texte en CSS</h2>
<p>
Prendre la plume pour écrire un texte ou une carte à caractère personnel est bien plus compliqué que de le faire pour une lettre administrative. Bien sûr la difficulté ne sera pas la même pour une simple lettre de remerciements ou une invitation que pour une lettre d'amour ou une carte pour annoncer un décès, car l'émotion s'ajoute à la difficulté de trouver les mots justes.
</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
Voici le résultat :
Devez-vous utiliser des CSS en ligne, internes ou externes pour centrer le texte ?
Lorsque vous considérez vos différentes options pour centrer le texte à l’aide de CSS, vous vous demandez peut-être s’il est préférable d’utiliser des CSS en ligne, internes ou externes.
Le CSS en ligne est inclus dans la balise d’ouverture d’un élément, comme suit :
<p style=”align-text: center”>
Le CSS interne est inclus entre les balises <style> dans l’en-tête de votre document HTML, comme suit :
<html>
<head>
<style>
body {
align-text:center
}
</style>
</head>
Le CSS externe fait référence au CSS dans la feuille de style externe que vous liez dans la balise head de votre document HTML.
Alors, laquelle de ces options vous convient ?
Si vous centrez un élément unique sur un article ou une page de blog, respectez le CSS en ligne. De cette façon, vous n’avez pas besoin de créer une classe CSS ou un ID uniquement pour cet élément, que vous devrez ensuite ajouter à votre feuille de style.
Si vous centrez un type d’élément sur une page spécifique, vous pouvez utiliser le CSS interne pour centrer cet élément sans aller un par un. Assurez-vous simplement de choisir le bon sélecteur CSS pour que vos modifications s’appliquent.
Si vous souhaitez centrer un type d’élément sur l’ensemble de votre site Web, utilisez la feuille de style externe.
Centrer le texte sur votre site Web
Si vous avez des connaissances de base en HTML et CSS, vous pouvez facilement centrer le texte sur vos pages Web. Cela peut vous aider à créer des mises en page personnalisées, à faire ressortir votre contenu et à engager les utilisateurs lorsqu’ils parcourent votre site Web.
