Comment aligner un bloc DIV horizontalement avec CSS

juillet 11, 2019février 10, 2020 Amine KOUIS 1 Commentaire

Si vous souhaitez aligner l’élément <div> horizontalement par rapport à l’élément parent, vous pouvez utiliser la propriété margin avec la valeur « auto ». La valeur auto ajuste automatiquement les marges gauche et droite et aligne le bloc DIV horizontalement au centre.

Code source :

<!DOCTYPE html>

<html>

<head>

<title>Aligner un bloc DIV horizontalement avec CSS</title>

<style>

.box {

width: 70%;

margin: 0 auto;

padding: 15px;

background: #ff7d95;

}

</style>

</head>

<body>

<h1>Titre</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aligner un bloc DIV horizontalement avec CSS</title> <style> .box { width: 70%; margin: 0 auto; padding: 15px; background: #ff7d95; } </style> </head> <body> <div class="box"> <h1>Titre</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Aligner un bloc DIV horizontalement avec CSS</title>
		<style>
			.box {
				width: 70%;
				margin: 0 auto;
				padding: 15px;
				background: #ff7d95;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>Titre</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</body>
</html>

Résultat
Titre Lorem ipsum dolor sit amet, consectetur adipiscing elit.

QCMs qui pourraient vous intéresser :

Comment aligner un bloc DIV horizontalement avec CSS

Code source :

Titre

Une réflexion sur “Comment aligner un bloc DIV horizontalement avec CSS”

Laisser un commentaire Annuler la réponse

Code source :

Titre

Vous pourrez aussi aimer

Personnaliser les boutons checkbox avec CSS

Comment ajouter l’ombre aux éléments HTML en CSS

Comment changer la couleur de la balise HR avec CSS

Une réflexion sur “Comment aligner un bloc DIV horizontalement avec CSS”

Laisser un commentaire Annuler la réponse