Vous ne devez pas savoir comment les images du div sont centrées horizontalement et verticalement

Vous ne devez pas savoir comment centrer l'image dans le div horizontalement et verticalement. Ici, l'éditeur propose cinq méthodes de centrage.

structure du corps

	<p>
		<img  alt="Vous ne devez pas savoir comment les images du div sont centrées horizontalement et verticalement" >
	</p>

Méthode 1 :
Définissez l'affichage sur la cellule du tableau, puis définissez l'alignement du texte au centre pour un centrage horizontal et l'alignement vertical au milieu pour un centrage vertical centrage.

<style>
	*{margin: 0;padding: 0;}
    p{
		width:150px;
		height: 100px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		border:1px solid #000;
	}
	img {
        width: 50px;
  		height: 50px;
	}
</style>

Le résultat est le suivant :

Méthode 2 :
Obtenu grâce au positionnement. Réglez p sur le positionnement relatif et définissez img sur le positionnement absolu, gauche : 50 %, haut : 50 %. À ce stade, le coin supérieur gauche de l'image est situé au centre de p. l'image est située au centre de p, vous devez alors déplacer l'image vers le haut de la moitié de la hauteur de l'image et vers la gauche de la moitié de la largeur de l'image.

<style>
	*{margin: 0;padding:0;}
	p{
		width:150px;
		height: 100px;
		position: relative;
		border:1px solid #000;
	}
	img {
  		width: 50px;
  		height: 50px;
  		position: absolute;
  		top: 50%;
		left: 50%;
  		margin-top: -25px; /* 高度的一半 */
  		margin-left: -25px; /* 宽度的一半 */
	}
</style>

Le résultat est le suivant :

Méthode 3 : peut être utilisée lorsque la largeur et la hauteur réelles de l'image ou de l'élément ne sont pas claires
Cela se fait toujours grâce au positionnement. Réglez p sur le positionnement relatif et définissez img sur le positionnement absolu, gauche : 50 %, haut : 50 %. À ce stade, le coin supérieur gauche de l'image est situé au centre de p. au centre de p, vous devez déplacer l'image. Déplacez la moitié de la hauteur de l'image vers le haut et la moitié de la largeur de l'image vers la gauche. Si vous ne connaissez pas la largeur et la hauteur de l'élément, vous pouvez utiliser transform: translation(. -50%,-50%);

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

Méthode 4 :

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

Méthode 5 : Flex de mise en page flexible

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

L'effet est le même , j'espère que cela pourra aider tout le monde !

Cet article est reproduit à partir de : https://blog.csdn.net/DreamFJ/article/details/68921957

Tutoriel recommandé : "Tutoriel HTML"

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!