Comment centrer le texte dans la case en HTML

Il existe quatre façons de centrer le texte dans une zone HTML : Utilisez la propriété CSS text-align: center pour le centrer horizontalement. Utilisez les propriétés padding-block-start et padding-block-end pour le centrage vertical. Utilisez Flexbox display : flex ; Utiliser Grid grid-template-columns: repeat(auto-fit, minmax(0, 1fr)

Comment centrer le texte dans la case en HTML

En HTML, vous pouvez centrer le texte dans la case Multiple méthodes :

Utilisez les propriétés CSS

text-align: center: La méthode la plus courante, qui centre le texte horizontalement dans le conteneur

<code class="css">.container {
  text-align: center;
}</code>

padding-block-start et padding-block-end: S'applique à texte centré verticalement. Définissez ces propriétés sur la même valeur de pixel pour centrer verticalement le texte dans un conteneur de blocs

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}</code>

Utilisez Flexbox

display: flex; alignez les éléments horizontalement et verticalement

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

Utilisez Grid

grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); Méthode de grille pour créer une disposition de grille Cet extrait de code crée une grille à une colonne avec du texte centré horizontalement et verticalement

<code class="css">.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
}</code>

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!