Explication graphique et textuelle détaillée de cinq méthodes de centrage horizontal et vertical des images (avec code)

Dans la mise en page, il est souvent nécessaire de traiter la position des images. Cet article se concentre sur le centrage des images. Il explique principalement comment utiliser CSS pour réaliser le centrage horizontal des images, le centrage vertical des images et le centrage horizontal et vertical. d'images. Comparaison de cours Amis praticiens et intéressés, vous pouvez vous y référer, j'espère qu'il vous sera utile.

1. text-align : center réalise le centrage horizontal des images

text-align est généralement utilisé pour le centrage horizontal du texte, mais peut également être utilisé pour les images. Le code est le suivant :

Partie CSS :

<style type="text/css">
    div{
        text-align: center;
        width: 500px; 
        border: green solid 1px;
        }
</style>

Partie HTML :

<div>
    <img  src="img/logo.png" / alt="Explication graphique et textuelle détaillée de cinq méthodes de centrage horizontal et vertical des images (avec code)" >
</div>

Rendu :

2. line-height et text-align : center pour obtenir un centrage horizontal et vertical de l'image

Définissez la valeur de line-height égale à hauteur pour obtenir un centrage vertical, alignement du texte : le centre peut réaliser un centrage horizontal. La partie HTML est la même, le code CSS est le suivant :

<style type="text/css">
div{
text-align: center; 
width: 400px;
height:200px; 
line-height:200px; 
border: green solid 1px;
}
img{
vertical-align: middle;
}
</style>

Rendu :

3 . display: table et display: table-cell réalise le centrage horizontal et vertical des images

Utilisez la méthode table pour définir display: table, display: table-cell, mais cette méthode n'est pas compatible avec IE6. /IE7, si vous n'avez pas besoin de supporter IE67 Vous pouvez utiliser cette méthode

pour écrire le style css directement dans la balise Le code est le suivant :

<div style="text-align: center; width: 400px;height:200px; display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
        <img  src="img/logo.png"  / alt="Explication graphique et textuelle détaillée de cinq méthodes de centrage horizontal et vertical des images (avec code)" >
    </span>
</div>

4. positionner pour centrer l'image horizontalement et verticalement

Méthode de positionnement : définir le positionnement relatif dans la zone parent et le positionnement absolu dans la zone enfant, appelé parent-relatif enfant-absolu. Réglez la position du côté gauche de l'image à 50 % et celle du haut à 50 % (remarque : cela ne la centre pas verticalement. Vous devez également définir la marge gauche sur la moitié de la longueur de l'image et la marge supérieure sur la moitié). la hauteur de l'image. La partie HTML est la même, le code CSS est le suivant

<style type="text/css">
div{
width: 400px;
height:200px; 
position: relative;
border: green solid 1px;
}
img{
width: 200px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -25px;
}
</style>

5 Le fond d'écran réalise le centrage horizontal et vertical de l'image

Utilisation. arrière-plan : url centre sans répétition pour réaliser l'image Centrage horizontal et vertical

div{
width: 400px;
height:200px; 
border: green solid 1px;
background: url(img/logo.png) no-repeat center center ;
}

Résumé : Ce qui précède présente 5 méthodes de centrage des images, chacune étant différente. La méthode spécifique à utiliser dépend de chacun. Habitudes et besoins professionnels. Les débutants peuvent l'essayer par eux-mêmes. J'espère que cela pourra vous aider !

.

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!