Comment aligner verticalement une image dans une DIV en CSS

juillet 10, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Vous pouvez aligner une image verticalement au centre d’un <div> en utilisant la propriété CSS vertical-align en combinaison avec display: table-cell; sur l’élément div contenant l’image.

Code HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Aligner verticalement une image dans une DIV</title>
		<style>
			/* Mettez le code CSS ici. */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
			</div>
		</div>
	</body>
</html>

Code CSS :

img {
    display: block;
    margin: 0 auto;
}

.container {
    display: inline-block;
    margin: 30px;
}

.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 250px;
    height: 200px;
    border: 1px solid black;
}