Comment aligner le texte verticalement au centre d’une DIV avec CSS

Si vous essayez d’aligner le texte dans une div en utilisant la règle CSS vertical-align: middle; cela ne fonctionne pas. Supposons que vous ayez un élément div avec une hauteur de 30px et que vous ayez placé un texte dans le div que vous souhaitez aligner verticalement au centre. La façon la plus simple de le faire est d’appliquez simplement la propriété line-height avec une valeur égale à la hauteur de div qui est 30px.
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Aligner le texte verticalement au centre d'une DIV avec CSS</title>
		<style type="text/css">
			.box{
				height: 30px;
				line-height: 30px;
				padding: 15px;        
				border: 2px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</div>
	</body>
</html>
Résultat
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *