Comment définir le style de centrage avec CSS ? Brève analyse des méthodes

CSS est l'un des langages de feuille de style les plus couramment utilisés dans la conception Web. Il peut non seulement modifier la couleur, la police, la taille et d'autres attributs des éléments de page Web, mais également réaliser des fonctions telles que le centrage et la mise en page. Dans la conception Web, le centrage des éléments est très important, c'est pourquoi cet article vous présentera comment utiliser CSS pour définir le style de centrage.

1. Centrage du texte

Dans la conception Web, le centrage du texte est un moyen de centrage très courant, qui peut rendre la mise en page Web plus nette et plus belle. Il existe deux manières principales de définir le centrage du texte en CSS :

1. Centrage horizontal.

La méthode de définition du centrage horizontal du texte en CSS est très simple. Ajoutez simplement text-align:center à l'étiquette pour obtenir le centrage horizontal du texte. Par exemple :

2. Centrage vertical

Par rapport au centrage horizontal, le centrage vertical est utilisé dans la conception Web Moins, mais dans certains scénarios spécifiques, comme les éléments flottants avec une expérience réactive, le centrage vertical peut jouer un rôle clé. Les méthodes permettant d'obtenir un centrage vertical en CSS sont généralement les suivantes :

(1) Implémentée via padding

Cette méthode utilise l'attribut padding pour réduire l'espace interne de l'élément en conséquence (à la fois vers le haut et vers le bas), de sorte que le centre de l'élément est aligné avec la ligne Relativement aligné en hauteur (définissez les marges d'un élément sur auto pour qu'il puisse être centré verticalement). Par exemple :

Remarque : 50 % ici est relatif à la hauteur du Pourcentage de l'élément parent (c'est-à-dire que la distance entre le haut de l'élément actuel et le haut de l'élément parent représente 50 % de la hauteur de l'ensemble de l'élément parent), -10px est la moitié de la hauteur de l'élément actuel. Cette configuration centrera le texte verticalement.

(2) En définissant la hauteur de la ligne

En CSS, vous pouvez utiliser la hauteur de la ligne pour obtenir un centrage vertical. Cette méthode est relativement simple, il suffit de définir la hauteur de la ligne pour qu'elle soit égale à la hauteur de la boîte. Par exemple :

2 Centrage de l'image

Le centrage de l'image est également un aspect important dans la conception Web. Cette méthode de centrage peut être facilement implémentée en CSS. La méthode spécifique est la suivante :

1. Centrage horizontal

Pour obtenir un centrage horizontal de l'image, définissez simplement la largeur du conteneur à l'extérieur de l'image à 100 % et la largeur de l'image à la largeur réelle. Par exemple :

< ;/div>

Après l'avoir réglé ainsi, vous pouvez centrer l'image horizontalement.

2. Centrage vertical

Pour réaliser le centrage vertical des images, la méthode est similaire au centrage vertical du texte. Vous pouvez utiliser la hauteur de ligne ou le remplissage pour y parvenir. Par exemple :

(1) Utilisez line-height :

(2) Utilisez le remplissage :

< / div>

Remarque : 50 % voici le pourcentage par rapport à la hauteur de l'élément parent (c'est-à-dire que la distance entre le haut de l'élément actuel et le haut de l'élément parent représente 50 % de la hauteur de l'élément parent. élément parent entier), et -250px correspond à la moitié de la hauteur de l'élément actuel. Ce paramètre centrera l’image verticalement.

Résumé : 

Ce qui précède explique comment définir le centrage en CSS. Le texte et les images peuvent être centrés horizontalement et verticalement grâce à des attributs tels que l'alignement du texte, la hauteur de la ligne et le remplissage. Dans la conception Web, le centrage est très important.J'espère que grâce à l'introduction de cet article, les lecteurs pourront maîtriser les compétences de définition du centrage en CSS et mieux obtenir l'effet de la conception Web.

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!