Maison > interface Web > tutoriel HTML > Vous ne devez pas savoir comment les images du div sont centrées horizontalement et verticalement

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

烟雨青岚
Libérer: 2020-07-01 11:35:22
avant
2712 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

Le résultat est le suivant :
Vous ne devez pas savoir comment les images du div sont centrées horizontalement et verticalement

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>
Copier après la connexion

Le résultat est le suivant :
Vous ne devez pas savoir comment les images du div sont centrées horizontalement et verticalement

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal