Explication détaillée de la méthode simple de centrage des éléments CSS

Cet article présente principalement une méthode simple pour expliquer en détail la disposition centrée des éléments CSS. L'article présente trois situations : les éléments en ligne, les éléments de bloc et les blocs en ligne. Les amis dans le besoin peuvent s'y référer

D'abord. avant tout, nous devons savoir quels types d’éléments existe-t-il ?

Éléments en ligne (display:inline;) tels que a, span, b, i [une boîte non personnalisable]

[Les pairs par défaut peuvent continuer à suivre le même type de balises]
[Largeur d'expansion du contenu]
[Ne prend pas en charge la largeur et la hauteur]
[Ne prend pas en charge les marges supérieures et inférieures ni le remplissage]
[Le retour à la ligne du code sera analysé comme vide]

Élément de bloc (display:block ;) Tel que p, p, h1-h6

[Afficher sur une ligne par défaut]
[Prend en charge essentiellement toutes les commandes CSS]

Bloc en ligne ( display:inline-block;) tel que img [img est une chose tellement magique. Ce n'est ni en ligne ni en bloc, mais un bloc en ligne】

[Bloc affiché sur une seule ligne]
[Supporter la largeur et la hauteur]
[Le contenu s'agrandit en largeur lorsqu'il n'y a pas de largeur]

Ensuite, nous centrerons les trois éléments ci-dessus dans l'ordre

1. Texte sur une seule ligne des éléments intégrés

La solution la plus courante consiste à utiliser text-align et line-height

line-height:200px;   
text-align:center;

Mais cette méthode est-elle absolument parfaite ? Je ne pense pas (quelqu'un se plaint peut-être de mon trouble obsessionnel-compulsif)
Quoi qu'il en soit, chaque fois que je sélectionne du texte, je me sens très mécontent quand je vois que des zones non textuelles sont également sélectionnées, mais IE6-8 ne sélectionne que texte

2. Centrer l'élément de bloc

Solution : utiliser une valeur de marge négative pour les éléments positionnés

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

Inconvénient : Il faut connaître la largeur et la hauteur de la boîte

3. Centrer le bloc en ligne

(1) Convertir l'image en image d'arrière-plan , puis utilisez background-position:center; mais il convient de noter que les liens vers les images changeant généralement fréquemment, vous devez faire ceci :

<img  style=”background-img:url(imgURL)” / alt="Explication détaillée de la méthode simple de centrage des éléments CSS" >

Cela viole-t-il les principe de séparation des styles de contenu ?

(2) Balises auxiliaires

Code html :

<p class="box">  
    <img  src="img.png" / alt="Explication détaillée de la méthode simple de centrage des éléments CSS" ><span></span>  
</p>

Code CSS :

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}   
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

Effet :

Non-sens : l'élément img et l'élément auxiliaire span doivent être sur une seule ligne, sinon le centrage horizontal sera incomplet Lors de l'utilisation de inline-block, le saut de ligne. sera analysé dans l'espace. En fait, il existe d’autres méthodes sur Internet, comme la méthode des tableaux qui est populaire depuis longtemps. Il y en a beaucoup en ligne, je ne les montrerai donc pas ici.

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!