Comment centrer l'image en CSS ? Résumé des méthodes de centrage des images CSS

Lors de la mise en page d'une page Web, la position de l'image peut parfois affecter la beauté de la page entière, c'est pourquoi l'emplacement de l'image doit être modifié. Ensuite, l'article suivant vous présentera le placement des images. Comment utiliser CSS pour réaliser le centrage dans les pages Web peut être une référence pour les amis dans le besoin.

Le centrage des images CSS peut être divisé en deux situations : le centrage horizontal et le centrage vertical des images CSS, respectivement.

1. Tout d'abord, jetons un coup d'œil à la méthode de centrage horizontal des images CSS

1. Utilisez margin: 0 auto pour obtenir un centrage horizontal des images

.

Code de centrage horizontal de l'image CSS :

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin: 0 auto;" />
</div>

2 Utilisez l'attribut de centrage horizontal text-align: center du texte pour réaliser le centrage horizontal de l'image

Centrage horizontal des images CSS Code :

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</div>

2. Voyons comment implémenter le centrage vertical des images CSS

.

1. Utilisation élevée = = hauteur de ligne pour obtenir un centrage vertical des images

Le code de centrage vertical de l'image CSS est le suivant :

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block; vertical-align: middle;" />
</div>

Remarque : Cette méthode doit indiquer la hauteur avant de pouvoir être utilisée.

2. Utilisez un tableau pour réaliser le centrage vertical des images

Le code de centrage vertical des images CSS est le suivant :

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</span>
</div>

Remarque : Cette méthode utilise l'attribut de centrage vertical du tableau

Remarque : display: table; et display: table-cell; sont utilisés ici pour simuler le tableau. IE7 et IE67 ne prennent pas en charge display. : table, si vous n'avez pas besoin de prendre en charge IE67, vous pouvez utiliser

Cette méthode présente un inconvénient : lorsque vous définissez display: table, cela peut modifier votre mise en page d'origine;

3. Utilisez le positionnement absolu pour obtenir le centrage vertical des images

Le code de centrage vertical des images CSS est le suivant :

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

Remarque : ceci La méthode peut être utilisée si la largeur et la hauteur de l'image sont connues.

Cet article se termine ici. Pour plus de détails sur les attributs ci-dessus, veuillez vous référer au manuel d'utilisation CSS.

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!