Comment encadrer un texte en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-11 12:07:00

Question

Comment faire pour encadrer un texte en HTML et CSS, de telle manière que le texte soit encadré et centré ?

Réponse

Pour encadrer un texte en HTML et CSS, vous pouvez créer une CLASS CSS à appliquer à la balise HTML qui contient le texte.

La CLASS pour encadrer le texte se compose des propriétés et des fonctions CSS suivantes :

width: fit-content adapte la taille du cadre au texte.
border: 2px solid red définit l'épaisseur du cadre, son type et sa couleur.
background-color: green détermine la couleur de fond de l'encadrement.
padding: 10px spécifie la taille de la marge entre le texte et le cadre.
margin: auto centre le cadre dans la page HTML.
text-align: center centre le texte dans le cadre.

Voici un exemple pour centrer et encadrer un texte en HTML et CSS ?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment encadrer un texte en HTML et CSS ?</title>
<style>
.encadrer_texte {
  width: fit-content;
  border: 2px solid red;
  background-color: green;
  padding: 10px;
  margin: auto;
  text-align: center;
}
</style>
</head>  
<body>
<div class="encadrer_texte">Un texte encadré en HTML et CSS</div>
</body>
</html>

Vous pouvez visualiser le rendu de ce code HTML, pour encadrer un texte, via le Bac à Codes.