Comment centrer verticalement les images dans les divs en utilisant CSS

Cet article présente principalement comment centrer verticalement des images dans des divs en utilisant CSS. Il a une certaine valeur de référence et j'espère qu'il pourra aider tout le monde

Nous travaillons généralement sur des pages. lorsque nous les créons. Nous rencontrons souvent des situations où l'on nous demande d'afficher une image au milieu d'un div mais nous ne savons souvent pas comment le faire. Aujourd'hui, nous allons partager plusieurs codes CSS couramment utilisés pour réaliser un centrage vertical des images. divs

Code HTML

<div>
	<img src="images/1.jpg">
</div>

Méthode 1

Utiliser la position et la marge pour réaliser

En définissant l'attribut de positionnement absolu sur l'élément parent. L'élément enfant est positionné par rapport au div

relatif signifie que la position d'origine est conservée et positionnée par rapport à sa propre position d'origine

absolue est positionné à l'écart de la position d'origine et est positionné par rapport au plus proche S'il n'y a pas d'élément parent positionné, il sera positionné par rapport au document

Remarque : Faites le haut, le bas, à gauche et à droite de l'élément enfant 0, puis définissez la marge : auto se centrera automatiquement verticalement

Le code est le suivant

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
	width:80px;
	height:50px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;//使其垂直居中
	}

Rendu

méthode 2

Utilisez les trois attributs d'affichage : table-cell ; vertical-align : text-align ; ; pour réaliser

display:table-cell: sera utilisé comme affichage de cellule de tableau (similaire à et )

vertical-align: middle; alignement vertical, applicable aux éléments de niveau ligne

text- align: center : définit l'alignement horizontal du texte dans l'élément de niveau bloc en spécifiant le point auquel. la zone de ligne est alignée.

div{
        width:200px;
        height: 200px;
        margin:300px auto;
        display: table-cell;//作为一个表格单元格显示
        vertical-align: middle;//设置垂直对齐方式
        text-align: center;//设置水平对其方式
        border:1px solid #ccc;
    }
     img {
        width:80px;
        height:50px;
    }

Rendu

Méthode 3

Utiliser la position et mise en œuvre de margin-top et margin-left

Dans cette méthode, il convient de prêter attention au réglage des valeurs margin-top et margin-left. Elles doivent être définies sur la moitié de la hauteur et de la largeur de la. élément, et les deux doivent être négatifs. Valeur

Par exemple, margin-top: -40px signifie que l'élément est à 40px vers le haut de la bordure supérieure, et margin-top: 40px signifie que l'élément est à 40px vers le bas de la bordure supérieure. la bordure supérieure

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;
}
img{
	position: absolute;
	width:80px;
	height: 50px;
	top:50%;
	left:50%;
	margin-top: -40px;//向上40px
	margin-left: -25px;//向左25px

}

Rendu

Résumé : Il existe de nombreuses façons d'utiliser CSS pour centrer verticalement des images dans des divs. les trois méthodes que j'ai résumées. Le reste est le bienvenu. Tout le monde a ajouté que j'espère que cet article pourra être utile à tout le monde dans l'apprentissage de la mise en page.

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!