Utilisez CSS pour implémenter diverses méthodes de centrage

Cet article présente principalement les méthodes d'utilisation du CSS pour réaliser divers centrages. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Le centrage signifie que nous utilisons le CSS pour la mise en page. Une situation souvent rencontrée. Lorsque vous utilisez CSS pour le centrage, parfois un seul attribut peut le faire, et parfois cela nécessite certaines compétences pour être compatible avec tous les navigateurs. Cet article donnera une brève introduction à certaines méthodes courantes de centrage.

Remarque : sauf indication contraire, les méthodes décrites dans cet article sont compatibles avec les navigateurs grand public tels que IE6+, Google et Firefox.

Parlons d'abord de quelques méthodes de centrage simples et inoffensives

Définissez la marge sur auto

Plus précisément, centrez simplement l'élément que vous souhaitez centrermargin-left et margin-right sont tous deux définis sur auto. Cette méthode ne peut effectuer qu'un centrage horizontal et n'est pas valide pour les éléments flottants ou les éléments positionnés de manière absolue.

Utilisez text-align:center

Il n'y a rien à dire à ce sujet Vous ne pouvez aligner horizontalement que les images, les boutons, le texte et les autres éléments en ligne (display est inline ou <.>, etc.) Centré. Mais il faut noter que dans les deux navigateurs bizarres IE6 et 7, il peut centrer n'importe quel élément horizontalement. inline-block

Utilisez line-height pour centrer verticalement une seule ligne de texte

Définissez le

du texte à la hauteur du conteneur parent du texte, ce qui convient aux situations où il n'y a que une ligne de texte. line-height

4. Utilisez des tableaux

Si vous utilisez un tableau, vous n'avez pas du tout à vous soucier de divers problèmes de centrage, tant que vous utilisez des éléments td (peut également utiliser th). Les deux attributs

et align="center" peuvent parfaitement gérer le centrage horizontal et vertical du contenu à l'intérieur, et le tableau centrera verticalement le contenu à l'intérieur par défaut. Si vous souhaitez contrôler le centrage du contenu du tableau dans valign="middle", vous pouvez utiliser css pour le centrage vertical Quant au centrage horizontal, il semble qu'il n'y ait pas d'attribut correspondant dans vertical-align:middle, mais dans IE6 et 7 nous pouvons. utilisez css Pour centrer horizontalement les éléments du tableau, text-align:center dans IE8+ et Google, Firefox et d'autres navigateurs ne fonctionnent que sur les éléments en ligne et n'est pas valide sur les éléments de bloc. text-align:center

Dans IE6 et 7, vous pouvez utiliser le
de css pour contrôler l'alignement horizontal du contenu du tableau, que le contenu soit en ligne Un élément ou un élément de bloc est valide. text-algin

Mais dans IE8+ et

, chrome et d'autres navigateurs, firefox n'est pas valide pour les éléments de bloc, et seul l'attribut text-align:center de la table peut être utilisé. align

Utilisez display:table-cell to center

Pour les éléments qui ne sont pas des tableaux, nous pouvons utiliser

pour le simuler comme une cellule de tableau, afin de pouvoir profiter de la table. Fonction de centrage pratique. Par exemple : display:table-cell

Cependant, cette méthode ne peut être utilisée que sur IE8+, Google, Firefox et d'autres navigateurs, et n'est pas valide pour IE6 et IE7.

Les méthodes qui y sont mentionnées sont toutes très basiques et ne peuvent pas être qualifiées d'astuces fantaisistes. Voici quelques méthodes de centrage qui nécessitent certaines compétences.

Utiliser le positionnement absolu pour le centrage

Cette méthode ne fonctionne que pour les éléments dont nous connaissons déjà la largeur ou la hauteur. Le principe du

positionnement absolu pour le centrage est de définir l'attribut

ou left de l'élément positionné de manière absolue sur top. A ce moment, l'élément n'est pas centré, mais est positionné plus loin de. le centre. Il est décalé vers la droite ou la gauche de la moitié de la largeur ou de la hauteur de l'élément, vous devez donc utiliser une valeur négative 50% ou margin-left pour le ramener à la position centrée. la valeur est la moitié de la largeur ou de la hauteur de l'élément. margin-topmargin
Effet de fonctionnement :

Si vous souhaitez obtenir un centrage uniquement dans une direction, vous ne pouvez utiliser que

,

pour obtenir un centrage horizontal , utilisez left ,margin-left pour obtenir un centrage vertical. topmargin-topUne autre façon de centrer en utilisant le positionnement absolu

Cette méthode ne fonctionne également que pour les éléments dont nous connaissons déjà la largeur ou la hauteur, et malheureusement elle ne prend en charge que IE9+, Google, Firefox et d'autres navigateurs modernes conformes avec les normes w3c.

Ce qui suit est un morceau de code pour comprendre cette méthode :

Effet de fonctionnement :

Si la largeur et la hauteur de l'élément ne sont pas définies ici, alors il La largeur sera déterminée par les valeurs de gauche et de droite, et la hauteur sera déterminée par les valeurs de haut et de bas, donc la hauteur et la largeur de l'élément doivent être définies . En même temps, si vous modifiez les valeurs de gauche, de droite, du haut et du bas, l'élément peut également être décalé dans une certaine direction. Vous pouvez l'essayer vous-même.

Utilisez des flotteurs avec un positionnement relatif pour centrer horizontalement

Cette méthode est également une solution pour centrer les éléments flottants horizontalement, et nous n'avons pas besoin de connaître la largeur de l'élément qui doit être centré.

Le principe du centrage flottant est de positionner l'élément flottant relativement à la largeur de l'élément parent 50%, mais à ce moment l'élément n'est pas centré, mais est la moitié de sa largeur plus large que la position centrée. , vous devez alors utiliser le positionnement relatif pour les éléments enfants à l'intérieur pour ramener la moitié supplémentaire de sa propre largeur. Et comme le positionnement relatif est positionné par rapport à lui-même, la moitié de sa propre largeur n'a besoin que d'être left ou peut être obtenu en le réglant sur right, vous n'avez donc pas besoin de savoir quelle est sa largeur réelle. 50%

Cette méthode d'utilisation de flotteurs et de positionnement relatif au centre présente l'avantage que vous n'avez pas besoin de connaître la largeur de l'élément à centrer, même si la largeur change constamment ; un élément supplémentaire pour envelopper l'élément à centrer.

Regardez le code :

Effet de course :

Utilisez la taille de la police pour obtenir un centrage vertical

Si le parent La hauteur de l'élément est connue. Si vous souhaitez centrer les éléments enfants à l'intérieur horizontalement et verticalement, vous pouvez utiliser cette méthode, et la largeur ou la hauteur des éléments enfants n'a pas besoin d'être connue.

Cette méthode n'est valable que pour IE6 et IE7.

Le point clé de cette méthode est de définir une valeur

appropriée pour l'élément parent. La valeur de cette valeur est la hauteur de l'élément parent divisée par 1,14, et l'élément enfant doit être un <.> ou font-size, vous devez ajouter l'attribut inline. inline-blockvertical-align:middlePour ce qui est de la raison pour laquelle il est divisé par 1,14 au lieu d'autres nombres, personne ne le sait vraiment. Il vous suffit de vous souvenir du nombre 1,14.

Comme mentionné dans la méthode 5, vous pouvez utiliser

pour effectuer le centrage dans les navigateurs actuels tels que IE8+, Firefox et Google, et voici convient à IE6 et IE7, donc combiner ces deux méthodes peut être compatible avec tous les navigateurs :

display:table-cellfont-size

Ci-dessus Dans l'exemple, parce que l'élément à centrer est un élément de bloc, nous devons également le transformer en élément en ligne. Si l'élément à centrer est un élément en ligne tel qu'une image, cette étape peut être omise.

De plus, si

est écrit au centre du parent, c'est une situation que l'on rencontre souvent lors de l'utilisation de CSS pour la mise en page. Lorsque vous utilisez CSS pour le centrage, parfois un seul attribut peut le faire, et parfois cela nécessite certaines compétences pour être compatible avec tous les navigateurs. Cet article donnera une brève introduction à certaines méthodes courantes de centrage.

Remarque : sauf indication contraire, les méthodes décrites dans cet article sont compatibles avec les navigateurs grand public tels que IE6+, Google et Firefox. vertical-align:middle

Parlons d'abord de quelques méthodes de centrage simples et inoffensives

Définissez la marge sur auto

Plus précisément, centrez simplement l'élément que vous souhaitez centrer

et

sont tous deux définis sur

. Cette méthode ne peut effectuer qu'un centrage horizontal et n'est pas valide pour les éléments flottants ou les éléments positionnés de manière absolue. margin-leftmargin-rightUtilisez text-align:centerauto

Il n'y a rien à dire à ce sujet Vous ne pouvez aligner horizontalement que les images, les boutons, le texte et les autres éléments en ligne (

est

ou <.>, etc.) Centré. Mais il faut noter que dans les deux navigateurs bizarres IE6 et 7, il peut centrer n'importe quel élément horizontalement.

displayUtilisez line-height pour centrer verticalement une seule ligne de texte inlineinline-blockDéfinissez le

du texte à la hauteur du conteneur parent du texte, ce qui convient aux situations où il n'y a que une ligne de texte.

4. Utiliser des formulaires

Si vous utilisez un tableau, vous n'avez pas du tout à vous soucier des divers problèmes de centrage. Utilisez simplement les attributs align="center" et valign="middle" de l'élément td (et éventuellement th). Il gère parfaitement l'horizontale. et le centrage vertical du contenu à l'intérieur, et le tableau centrera verticalement le contenu à l'intérieur par défaut. Si vous souhaitez contrôler le centrage du contenu du tableau dans css, vous pouvez utiliser vertical-align:middle pour le centrage vertical Quant au centrage horizontal, il semble qu'il n'y ait pas d'attribut correspondant dans css, mais dans IE6 et 7 nous pouvons. utilisez text-align:center Pour centrer horizontalement les éléments du tableau, text-align:center dans IE8+ et Google, Firefox et d'autres navigateurs ne fonctionnent que sur les éléments en ligne et n'est pas valide sur les éléments de bloc.

Dans IE6 et 7, vous pouvez utiliser le css de text-algin pour contrôler l'alignement horizontal du contenu du tableau, que le contenu soit en ligne Un élément ou un élément de bloc est valide.

Mais dans IE8+ et chrome, firefox et d'autres navigateurs, text-align:center n'est pas valide pour les éléments de bloc, et seul l'attribut align de la table peut être utilisé.

Utilisez display:table-cell to center

Pour les éléments qui ne sont pas des tableaux, nous pouvons utiliser display:table-cell pour le simuler comme une cellule de tableau, afin de pouvoir profiter de la table. Fonction de centrage pratique. Par exemple :


Cependant, cette méthode ne peut être utilisée que sur IE8+, Google, Firefox et d'autres navigateurs, et n'est pas valide pour IE6 et IE7.

Les méthodes qui y sont mentionnées sont toutes très basiques et ne peuvent pas être qualifiées d'astuces fantaisistes. Voici quelques méthodes de centrage qui nécessitent certaines compétences.

Utiliser le positionnement absolu pour le centrage

Cette méthode ne fonctionne que pour les éléments dont nous connaissons déjà la largeur ou la hauteur. Le principe du

positionnement absolu pour le centrage est de définir l'attribut left ou top de l'élément positionné de manière absolue sur 50%. A ce moment, l'élément n'est pas centré, mais est positionné plus loin de. le centre. Il est décalé vers la droite ou la gauche de la moitié de la largeur ou de la hauteur de l'élément, vous devez donc utiliser une valeur négative margin-left ou margin-top pour le ramener à la position centrée. la valeur est la moitié de la largeur ou de la hauteur de l'élément. margin
Effet de fonctionnement :

Si vous souhaitez obtenir un centrage uniquement dans une direction, vous ne pouvez utiliser que

, left pour obtenir un centrage horizontal , utilisez margin-left ,top pour obtenir un centrage vertical. margin-top

Une autre façon de centrer en utilisant le positionnement absolu

Cette méthode ne fonctionne également que pour les éléments dont nous connaissons déjà la largeur ou la hauteur, et malheureusement elle ne prend en charge que IE9+, Google, Firefox et d'autres navigateurs modernes conformes avec les normes w3c.

Ce qui suit est un morceau de code pour comprendre cette méthode :

Effet d'exécution :

Si la largeur et la hauteur de l'élément ne sont pas définis ici, alors sa largeur sera déterminée par les valeurs de gauche et de droite, et sa hauteur sera déterminée par les valeurs de haut et de bas, donc la hauteur et la largeur de l'élément doivent être réglé. En même temps, si vous modifiez les valeurs de gauche, de droite, du haut et du bas, l'élément peut également être décalé dans une certaine direction. Vous pouvez l'essayer vous-même.

Utilisez des flotteurs avec un positionnement relatif pour centrer horizontalement

Cette méthode est également une solution pour centrer les éléments flottants horizontalement, et nous n'avons pas besoin de connaître la largeur de l'élément qui doit être centré.

Le principe du centrage flottant est de positionner l'élément flottant relativement à la largeur de l'élément parent

, mais à ce moment l'élément n'est pas centré, mais est la moitié de sa largeur plus large que la position centrée. , vous devez alors utiliser le positionnement relatif pour les éléments enfants à l'intérieur pour ramener la moitié supplémentaire de sa propre largeur. Et comme le positionnement relatif est positionné par rapport à lui-même, la moitié de sa propre largeur n'a besoin que d'être 50% ou peut être obtenu en le réglant sur left, vous n'avez donc pas besoin de savoir quelle est sa largeur réelle. right

Cette méthode d'utilisation du positionnement flottant et relatif au centre présente l'avantage que vous n'avez pas besoin de connaître la largeur de l'élément à centrer, même si la largeur change constamment. L'inconvénient est qu'elle nécessite un élément supplémentaire ; pour envelopper l'élément à centrer.

Regardez le code :

Effet de course :

Utilisez la taille de la police pour obtenir un centrage vertical

Si le parent La hauteur de l'élément est connue. Si vous souhaitez centrer les éléments enfants à l'intérieur horizontalement et verticalement, vous pouvez utiliser cette méthode, et la largeur ou la hauteur des éléments enfants n'a pas besoin d'être connue.

Cette méthode n'est valable que pour IE6 et IE7.

Le point clé de cette méthode est de définir une valeur font-size appropriée pour l'élément parent. La valeur de cette valeur est la hauteur de l'élément parent divisée par 1,14, et l'élément enfant doit être un <.> ou inline, vous devez ajouter l'attribut inline-block. vertical-align:middle

Pour ce qui est de la raison pour laquelle il est divisé par 1,14 au lieu d'autres nombres, personne ne le sait vraiment. Il vous suffit de vous souvenir du nombre 1,14.

Comme mentionné dans la méthode 5, vous pouvez utiliser

pour effectuer le centrage dans les navigateurs actuels tels que IE8+, Firefox et Google, et voici est applicable à IE6 et IE7, donc combiner ces deux méthodes peut être compatible avec tous les navigateurs : display:table-cellfont-size

Ci-dessus Dans l'exemple, parce que l'élément à centrer est un élément de bloc, nous devons également le transformer en élément en ligne. Si l'élément à centrer est un élément en ligne tel qu'une image, cette étape peut être omise.

De plus, si

est écrit dans l'élément parent au lieu de l'élément enfant, cela est également possible, mais la valeur de 1,14 utilisée dans le calcul de

deviendra environ 1,5. vertical-align:middlefont-sizeCi-dessus sont quelques méthodes de centrage courantes. S'il y a des omissions ou des erreurs, veuillez les corriger !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS pour obtenir un effet d'ombre

CSS3 Implémenter l'animation d'expansion et de réduction de la barre latérale

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!