Comment positionner des éléments Web avec l’alignement vertical CSS

CSS fournit plusieurs propriétés d’alignement. La propriété text-align, limitée aux éléments de bloc et aux cellules de tableau, décrit l’alignement horizontal. En revanche, la propriété vertical-align ne s’applique qu’aux éléments en ligne et aux cellules de tableau.

Vous pouvez utiliser de nombreuses valeurs différentes pour contrôler l’alignement vertical. Certains sont relatifs à l’élément parent, d’autres aux éléments affichés sur la même ligne horizontale. Découvrez exactement comment vous pouvez utiliser l’alignement vertical dans diverses situations pour obtenir un positionnement précis.

Les différentes valeurs d’alignement vertical

La propriété vertical-align accepte trois types de valeur distincts : les mots-clés, les pourcentages et les longueurs. Chaque valeur représente une position verticale sur une ligne ou relative à l’élément parent (conteneur) de l’élément ciblé.

Les principales valeurs d’alignement vertical sont :

baseline : positionne l’élément cible dans la ligne de base de l’élément parent.
top : positionne le haut de l’élément cible avec le haut de l’élément le plus haut de la ligne courante.
milieu : centre l’élément cible dans sa ligne actuelle.
bas : positionne le bas de l’élément cible avec le bas de l’élément le plus bas de la ligne courante.
sub : positionne l’élément cible avec la ligne de base en indice de l’élément parent.
super : positionne l’élément cible à la ligne de base en exposant de l’élément parent.
text-top : positionne l’élément cible en haut de la police de l’élément parent.
text-bottom : positionne l’élément cible avec le bas de la police de l’élément parent.
pourcentage (ex. 20%) : positionne la ligne de base de l’élément cible à un point au-dessus, en dessous ou sur la ligne de base de l’élément parent. Cette valeur peut être négative ou positive.
longueur (par exemple 10em) : positionne la ligne de base de l’élément cible à un point au-dessus, en dessous ou sur la ligne de base de l’élément parent. Cette valeur peut être négative ou positive.

UTILISEZ LA VIDÉO DU JOUR

Un modèle HTML de base

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
}
</style>
<title>Document</title>
</head>
<body>
<div id="container">
<a href="http://google.com">Google Search</a>
<img src="https://source.unsplash.com/jFCViYFYcus/300x150" alt=" image of the forest">
<video width="320" controls>
<source src="videos/ocean_view.mov" type="video/mp4">
Video of the ocean.
</video>
<table>
<tr>
<th>Scenery</th>
<th>Discription</th>
</tr>
<tr>
<td>Forest</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
<tr>
<td>Ocean</td>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</table>
</div>
</body>
</html>

le Code HTML ci-dessus crée une page Web simple qui affiche quatre éléments : un texte lié, une image, une vidéo intégrée et un tableau. Cela devrait ressembler à ceci dans votre navigateur :

Comment aligner verticalement le texte

Par défaut, la plupart des éléments de texte (tels que les titres, les balises

) sont des éléments de bloc. La seule façon d’aligner verticalement ces éléments est de les convertir d’abord en éléments inline, en utilisant la propriété display.

Cependant, certains éléments de texte tels que les balises et sont en ligne. Par conséquent, ils prennent en charge la propriété d’alignement vertical. Pour aligner le texte verticalement, attribuez simplement la valeur appropriée à la propriété CSS vertical-align.

Utilisation de la valeur supérieure alignée verticalement sur le texte

a {
vertical-align: top;
}

Ajout de la Code CSS ci-dessus au document HTML de base alignera le haut du texte de la balise avec le haut de l’élément le plus haut de la ligne. Production de l’affichage mis à jour suivant :

Texte aligner verticalement la valeur supérieure

Utilisation de la valeur en pourcentage sur le texte

a {
vertical-align: -50%;
}

Le CSS ci-dessus aligne l’élément de texte à une position située à 50 % en dessous de la ligne de base de l’élément parent. Il produit la sortie suivante dans votre navigateur :

Valeur de pourcentage d'alignement vertical du texte

Comme vous pouvez le voir dans l’image ci-dessus, l’élément de texte occupe une position en dessous des éléments image et vidéo, qui sont sur la même ligne. Pour positionner cet élément au niveau ou au-dessus de la ligne de base, utilisez une valeur de pourcentage positive.

Utilisation de la valeur de longueur sur le texte

a {
vertical-align: 90px;
}

Le code ci-dessus aligne la ligne de base de l’élément de texte à une longueur de 90 pixels au-dessus de la ligne de base de l’élément parent. Cela produit la sortie suivante dans un navigateur :

Valeur de longueur d'alignement vertical du texte

Comment aligner verticalement les images

La balise est un élément en ligne, avec lequel la propriété CSS vertical-align fonctionne bien.

Utilisation de la super valeur d’alignement vertical sur les images

img {
vertical-align: super;
}

Le code ci-dessus positionne l’image à la ligne de base en exposant de l’élément parent. Cela signifie à une position au-dessus de la ligne de base, comme vous pouvez le voir dans la sortie suivante :

Super valeur d'alignement vertical de l'image

Utilisation de la valeur de pourcentage d’alignement vertical sur les images

img {
vertical-align: 25%;
}

Le code ci-dessus aligne la ligne de base de l’élément image à 25 % au-dessus de la ligne de base de l’élément parent. Cela produit l’effet miroir suivant de la super valeur :

Valeur de pourcentage d'alignement vertical de l'image

Utilisation de la valeur de longueur d’alignement vertical sur les images

img {
vertical-align: 5px;
}

Le code ci-dessus aligne la ligne de base de l’élément image à une position 5 pixels au-dessus de la ligne de base de l’élément parent. Cela produit un effet similaire à celui des valeurs super et 25 % :

Valeur de longueur d'alignement vertical de l'image

Les médias intégrés tels que les vidéos et les iframes sont des éléments HTML en ligne. Par conséquent, la propriété CSS vertical-align fonctionne très bien avec eux.

Utilisation de la super valeur d’alignement vertical sur une vidéo

video {
vertical-align: sub;
}

Le code ci-dessus positionne la vidéo à la ligne de base de l’indice de l’élément parent. Cela signifie à une position en dessous de la ligne de base, comme vous pouvez le voir dans la sortie suivante :

Sous-valeur d'alignement vertical de la vidéo

Utilisation de la valeur de pourcentage d’alignement vertical sur une vidéo

video {
vertical-align: -25%;
}

Le code ci-dessus aligne la ligne de base de l’élément vidéo à 25 % en dessous de la ligne de base de l’élément parent. Cela produit l’effet miroir suivant de la sous-valeur :

Valeur de pourcentage d'alignement vertical de la vidéo

Utilisation de la valeur de longueur d’alignement vertical sur une vidéo

video {
vertical-align: -5px;
}

Le code ci-dessus aligne la ligne de base de l’élément image à une position 5 pixels sous la ligne de base de l’élément parent. Cela produit un effet comme les valeurs sub et -25 % :

Valeur de longueur d'alignement vertical de la vidéo

Comment aligner verticalement des éléments dans un tableau

L’utilisation de la propriété vertical-align avec un tableau est un peu délicate, car un tableau est un élément de bloc. Cependant, les balises

et sont des éléments en ligne. Par conséquent, vous pouvez utiliser la propriété CSS vertical-align sur le texte d’un tableau.

Utilisation de la valeur supérieure d’alignement vertical sur les données de table

td {
height: 40px;
vertical-align: top;
}

Le code ci-dessus ajoute une hauteur de 40 pixels à chaque cellule du tableau. Il aligne ensuite les données de chaque cellule sur le haut de chaque ligne. Cela produit la sortie suivante dans le navigateur :

Données de table aligner verticalement la valeur supérieure

Utilisation de la valeur médiane à alignement vertical sur les données de la table

td {
height: 40px;
vertical-align: middle;
}

La valeur centrale d’alignement vertical dans le code ci-dessus centre verticalement les données dans chaque cellule. Il produit la sortie suivante dans le navigateur :

Données de tableau aligner verticalement la valeur médiane

Utilisation de la valeur inférieure à alignement vertical sur les données du tableau

td {
height: 40px;
vertical-align: bottom;
}

Le code ci-dessus aligne les données de chaque cellule au bas de chaque ligne. Il produit la sortie suivante dans le navigateur :

Données de table aligner verticalement la valeur inférieure

Vous pouvez maintenant aligner les éléments sur votre page Web

Vous pouvez désormais utiliser la propriété CSS vertical-align avec une multitude d’éléments en ligne différents, notamment du texte, des médias intégrés et des données de tableau. La règle générale est que la propriété vertical-align ne fonctionne que sur les éléments inline et inline-block.

Cependant, vous pouvez utiliser cette propriété sur des éléments de bloc, il vous suffit d’abord de les convertir en éléments inline ou inline-block. N’oubliez pas que vous pouvez combiner vertical-align avec d’autres propriétés d’alignement, telles que text-align.

Une machine à écrire avec le mot News imprimé

Alignez les choses avec la propriété CSS Text Align

A propos de l’auteur

Comment positionner des éléments Web avec l’alignement vertical CSS

Kadeisha Kean
(52 articles publiés)

Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel facilement compréhensible par tout novice en technologie. Elle est passionnée par l’écriture, le développement de logiciels intéressants et le voyage à travers le monde (à travers des documentaires).

Plus de Kadeisha Kean

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner

— to www.makeuseof.com

Magazine Gadgets