Comment afficher le HTML au centre

Comment afficher le HTML au centre

Dans la conception Web, le centrage de l'affichage est une méthode de mise en page très courante. Pour les développeurs de pages HTML, savoir centrer les éléments est une compétence essentielle. Dans cet article, nous examinerons quelques façons de centrer le HTML.

1. Centrage du texte

Pour le texte des pages HTML, vous pouvez facilement le centrer à l'aide de CSS. Par exemple, ajoutez le code suivant à votre fichier CSS :

text-align: center;

Ce code centrera tout le texte dans l'élément.

2. Les éléments de niveau bloc sont centrés

Les éléments de niveau bloc font référence à DIV, P, H1 et à d'autres éléments. Pour centrer ces éléments, on peut utiliser la propriété margin. Le code suivant centrera l'élément DIV horizontalement :

div {
  margin: 0 auto;
}

Cela donnera un espacement égal entre les côtés gauche et droit de l'élément DIV et centrera l'élément horizontalement.

3. Centrer l'image

Centrer l'image est également une compétence que les développeurs doivent utiliser. Nous pouvons centrer l'image à l'aide de l'attribut text-align en écrivant le code suivant en HTML :

<div style="text-align:center;">
  <img src="img/logo.jpg" alt="Logo">
</div>

Le code ci-dessus place l'image et sa description dans un DIV et centre le DIV. Vous pouvez contrôler la taille de l'image en définissant la largeur et la hauteur du DIV.

4. Centrer le tableau

Si vous devez centrer le tableau dans la page HTML, vous pouvez utiliser les attributs margin et text-align. Le code suivant montre comment centrer un tableau :

table {
  margin: 0 auto;
  text-align: center;
}

Ce code centre le tableau horizontalement et centre les données du tableau dans les colonnes.

5. Affichage centré des éléments de largeur fixe

Lorsque nous devons centrer un élément de largeur fixe, nous pouvons utiliser le code CSS suivant :

.element {
  position: absolute;
  left: 50%;
  margin-left: -[元素宽度的一半];
}

Cela fera la distance de l'élément par rapport au côté gauche du élément parent 50% et déplacez-le vers Déplacez l'élément de la moitié de sa largeur vers la gauche pour le centrer.

6. Disposition Flexbox

Enfin, nous pouvons également utiliser la disposition flexbox pour obtenir un affichage centré. Flexbox est une mise en page fluide qui optimise la façon dont les éléments sont disposés sur la page. Voici un exemple :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Ajoutez le code ci-dessus à un conteneur dans un fichier HTML pour centrer le contenu dans le conteneur.

Résumé

L'affichage centré est l'une des techniques de base de la conception de pages HTML. Qu'il s'agisse de texte, d'images, de tableaux ou d'éléments à largeur fixe, vous pouvez utiliser différentes techniques pour réaliser le centrage. Lorsque les développeurs maîtriseront ces techniques, ils seront plus à l’aise pour créer de belles pages accrocheuses.

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!