Comment centrer l'image en CSS

Comment centrer l'image avec CSS : 1. Utilisez le style "margin:0 auto" ou "text-align:center" pour centrer l'image horizontalement 2. Utilisez "height == row height" pour centrer l'image verticalement ; 3. Utilisez le tableau pour centrer verticalement l'image. 4. Utilisez le positionnement absolu pour centrer verticalement l'image.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

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 la présentera. Concernant la façon d'utiliser CSS pour centrer des images sur des pages Web, cela 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

Utilisez margin : 0 auto pour obtenir l'horizontale. centrage 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>

Utiliser l'attribut de centrage horizontal text-align : centre du texte à réaliser L'image est centrée horizontalement

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="display: inline-block;"/>
</div>

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

2. Voyons comment réaliser le centrage vertical des images CSS

1. height == hauteur de ligne pour réaliser le 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é.

2. Utilisez un tableau pour réaliser le 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; 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; display: table-cell; n'est pas compatible avec IE6/IE7. IE67 ne prend 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; votre mise en page originale

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

Le code de centrage vertical de l'image 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>

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!