Dans cet article, nous allons voir comment aligner horizontalement deux éléments <div> en HTML. Il existe plusieurs moyens pour aligner horizontalement deux éléments <div> en HTML, et dans cet article, nous allons voir quatre façons d'y parvenir. La méthode la plus simple et la plus efficace consiste à utiliser une des propriétés CSS suivantes : inline-block, float, grid et flex.
En utilisant la propriété CSS inline-block
La manière la plus courante d'aligner horizontalement deux éléments <div> en HTML est d'utiliser la propriété CSS inline-block.
<!DOCTYPE html>
<html>
<head>
<title>Alignement horizontal de 2 divs</title>
<style>
.parent {
border: 1px solid black;
margin: 1rem;
padding: 2rem 2rem;
text-align: center;
}
.child {
width: 50px;
height: 30px;
border: 1px solid red;
padding: 1rem 1rem;
display: inline-block;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>DIV 1</div>
<div class='child'>DIV 2</div>
</div>
</body>
</html>
Le résultat du bout de code ci-dessus est le suivant :
La propriété inline-block de l'élément <div> parent a placé les deux éléments <div> child côte à côte et, comme il s'agit d'un inline-block, la propriétté text-align a fonctionné ici comme pour un élément en ligne.
Nous pouvons également créer un espace entre les deux divisions en ajoutant margin-right au premier <div> et/ou margin-left au second.
En utilisant la propriété CSS float
Le code suivant montre comment utiliser la propriété CSS float pour aligner deux éléments <div> horizontalement.
<!DOCTYPE html>
<html>
<head>
<title>Alignement horizontal de 2 divs</title>
<style>
.float-parent-element {
width: 100%;
margin-top: 25px;
}
.float-child-element {
float: left;
width: 50%;
}
.red {
background-color: red;
height: 100px;
}
.yellow {
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="float-parent-element">
<div class="float-child-element">
<div class="red">Float Column 1</div>
</div>
<div class="float-child-element">
<div class="yellow">Float Column 2</div>
</div>
</div>
</body>
</html>
L'exécution du code ci-dessus produit le résultat suivant :
Dans l'exemple ci-dessus, nous avons créé un conteneur principal de classe float-parent-element avec une lageur de 100% et une marge haute de 25px.
Dans le conteneur principal, nous avons ajouté deux éléments <div> avec la classe float-child-element qui ont chacun une largeur de 50% et flotte à gauche.
Et enfin, pour chaque élément float-child-element, nous avons un élément <div>. Le premier élément <div> de classe red a une couleur de fond rouge et une hauteur de 100px, et le deuxième élément <div> de classe yellow a une couleur de fond jaune et une hauteur de 100px.
En utilisant la propriété CSS flexbox
Le code suivant montre comment utiliser la propriété CSS flexbox pour aligner horizontalement deux éléments <div>.
<!DOCTYPE html>
<html>
<head>
<title>Alignement horizontal de 2 divs</title>
<style>
.flex-parent-element {
display: flex;
width: 100%;
}
.flex-child-element {
flex: 1;
border: 2px solid royalblue;
margin: 10px;
}
.flex-child-element:first-child {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-parent-element">
<div class="flex-child-element magenta">Flex Column 1</div>
<div class="flex-child-element green">Flex Column 2</div>
</div>
</body>
</html>
Avec la méthode flexbox, nous avons défini la propriété display: flex sur le parent .flex-parent-element.
Cela permet d'activer la propriété flexbox sur tous les éléments fils..
Ensuite, dans chaque .flex-child-element, nous définissons la propriété flex: 1. Ce nombre est comme un rapport comparant les largeurs de chaque élément fils dans l'élément flex parent.
Puisqu'ils sont identiques, l'espace disponible sera divisé équitablement. Et puisque nous avons deux éléments fils, ils occuperont chacun 50%.
Voici à quoi ressemblera le résultat de l'exécution du code ci-dessus :
Remarquez que nous avons ajouté une marge de 10 pixels à .flex-child-element. Cependant, flexbox est suffisamment intelligent pour prendre en compte ces 20 pixels supplémentaires lors de la division du reste de la largeur disponible.
Cela signifie que vous pouvez ajouter de l'espace avec une marge sans avoir à calculer les pixels exacts. Flexbox adaptera le contenu pour vous !
En utilisant la propriété CSS grid
Et enfin, voici comment utiliser la propriété CSS flexbox pour aligner horizontalement deux éléments <div>.
<!DOCTYPE html>
<html>
<head>
<title>Alignement horizontal de 2 divs</title>
<style>
.grid-container-element {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
border: 1px solid black;
width: 100%;
}
.grid-child-element {
margin: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="grid-container-element">
<div class="grid-child-element purple">Grid Column 1</div>
<div class="grid-child-element green">Grid Column 2</div>
</div>
</body>
</html>
Et voici à quoi ressemblera le résultat :
Un grand changement avec la méthode grid est que vous déterminez d'abord à quoi ressemblera le modèle de grille. Cela signifie combien de colonnes et/ou de lignes vous voulez dans votre mise en page.
Dans notre cas, nous voulons deux colonnes de largeur égale. Ainsi, dans l'élément parent grid-container-element, nous activons la grille avec la propriété CSS display: grid. Ensuite, nous ajoutons le nombre de colonnes que nous voulons dans notre mise en page avec la propriété grid-template-columns.
Nous voulons deux colonnes de largeur égale, nous le définissons donc sur 1fr 1fr. Cela indique au navigateur de créer un affichage sur deux colonnes, et chaque colonne occupe 1fr (fr = unité fractionnaire) d'espace.
L'unité fr est un rapport de chaque colonne à une autre, similaire à la propriété flex: 1 que nous avons utilisée dans la méthode flexbox. Avoir les colonnes définies sur 1fr 1fr signifie que chaque colonne occupera le même espace.
L'un des grands avantages de l'utilisation de la méthode grid est que vous n'avez pas besoin d'utiliser de marge pour ajouter de l'espace entre les éléments de la grille.
Vous pouvez utiliser la propriété grid-gap (ou gap dans les nouveaux navigateurs) pour ajouter automatiquement de l'espace dans votre grille.
Nous avons défini l'espacement de la grille sur 20 pixels, de sorte que le navigateur saura ajouter 20 pixels d'espace entre tous les éléments, qu'ils soient côte à côte ou empilés.