En CSS, la propriété vertical-align contrôle l'alignement vertical des éléments de niveau en ligne ou des cellules de tableau dans leur élément conteneur. Il s'applique aux éléments qui font partie d'une ligne de texte ou sont affichés sous forme de bloc en ligne ou de cellule de tableau.
comparer en chaîne
La propriété « vertical-align » est couramment utilisée pour les éléments en ligne tels que les images, le texte ou les éléments de bloc en ligne dans une ligne de texte. Cela ne s'applique pas directement aux éléments de niveau bloc ; cependant, vous pouvez utiliser des techniques comme la flexbox ou le positionnement pour les aligner verticalement.
Syntaxe:
Voici la syntaxe de base de la propriété vertical-align :
selector { vertical-align: value; } La « valeur » peut être l'une des options suivantes :
| Base de référence : | Aligne la ligne de base de l'élément avec la ligne de base de son élément parent. Il s'agit de la valeur par défaut pour la plupart des éléments.
| Sous: | Aligne la ligne de base de l'élément avec la ligne de base d'indice de la police de l'élément parent.
| Super: | Aligne la ligne de base de l'élément avec la ligne de base en exposant de la police de l'élément parent.
| Haut: | Alignez le haut de l'élément avec le haut de l'élément le plus haut de la ligne dans la zone de ligne.
| Texte en haut : | Aligne le haut de l'élément avec le haut de la police de l'élément parent.
| Milieu: | Centre verticalement l'élément par rapport à l'élément parent.
| Bas: | Alignez le bas de l'élément avec le bas de l'élément le plus bas de la ligne dans la zone de ligne.
| Texte en bas : | Alignez le bas de l'élément avec le bas de la police de l'élément parent.
| Pourcentage: | L'élément est aligné verticalement à un pourcentage spécifié de la hauteur de la ligne. Par exemple, vertical-align: 50% centrera l'élément verticalement au sein de son élément parent.
REMARQUE : rappelez-vous que « vertical-align » a son comportement spécifique en fonction du type d'élément et du contexte dans lequel il est utilisé, ses effets peuvent donc ne pas toujours être simples. Il est particulièrement utile pour aligner des éléments en ligne avec du texte ou d'autres éléments en ligne.
Exemples
Voici quelques détails et exemples supplémentaires liés à la propriété « vertical-align » en CSS :
1. Alignement de la ligne de base :
Référence Autre texte
2. Indice et exposant :
| L'alignement vertical : | La valeur Sub aligne la ligne de base de l'élément avec la ligne de base de l'indice de la police de l'élément parent, la faisant apparaître comme un indice. D'autre part,
| aligner verticalement : | Super aligne la ligne de base de l'élément avec la ligne de base en exposant de la police de l'élément parent.
H2O est l'eau. X2+ et2=r2
polymorphisme en Java
3. Alignement haut et bas :
| L'alignement vertical : | La valeur supérieure aligne le haut de l'élément avec le haut de l'élément le plus haut de la ligne dans la zone de ligne. De la même manière,
| aligner verticalement : | Le bas aligne le bas de l'élément avec le bas de l'élément le plus bas de la ligne dans la zone de ligne.
Aligné en haut Aligné en bas
4. Alignement central :
| L'alignement vertical : | La valeur moyenne centre verticalement l’élément par rapport à l’élément parent. Ceci est souvent utilisé pour centrer des icônes ou des images dans le texte.
Cette icône est centrée verticalement 
5. Alignement du texte en haut et en bas :
| L'alignement vertical : | La valeur Text-top aligne le haut de l'élément avec le haut de la police de l'élément parent et
| aligner verticalement : | Text-bottom aligne le bas de l'élément avec le bas de la police de l'élément parent.
Texte aligné en haut Texte aligné en bas
6. Pourcentage d’alignement :
L'utilisation d'une valeur de pourcentage avec alignement vertical vous permet d'aligner l'élément verticalement à un pourcentage de hauteur de ligne spécifique. Par exemple, vertical-align: 50% centrera l'élément à la moitié de la hauteur de la ligne.
Centré verticalement
7. Centrage vertical des éléments au niveau du bloc :
java ajouter à un tableau
Pour centrer verticalement un élément de niveau bloc à l'intérieur de son parent, vous pouvez utiliser la disposition flexbox ou grille.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 8. Centrage vertical avec hauteur d'élément inconnue :
Si vous ne connaissez pas la hauteur de l'élément que vous souhaitez centrer verticalement, vous pouvez utiliser une combinaison de position et de transformation :
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 9. Centrage vertical avec texte multiligne :
Pour centrer verticalement du texte multiligne dans un conteneur, vous pouvez utiliser une combinaison de flexbox et d'un pseudo-élément :
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } 10. Centrage vertical des images dans un conteneur avec différents formats d'image :
Si vous avez des images de différents formats d'image que vous souhaitez centrer dans un conteneur, vous pouvez utiliser une combinaison de flexbox et d'ajustement d'objet :
HTML :
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS :
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 11. Combiner l'alignement vertical avec la hauteur de ligne :
Vous pouvez combiner la propriété vertical-align avec la propriété line-height pour obtenir un alignement vertical plus précis, en particulier avec des tailles de police plus grandes.
différence entre un tigre et un lion
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 12. Utilisation de la propriété d'affichage pour l'alignement :
Bien que l'alignement vertical fonctionne principalement avec les éléments de niveau en ligne, vous pouvez modifier la propriété d'affichage pour obtenir un alignement vertical pour les éléments de niveau bloc dans des contextes spécifiques.
.container { display: table-cell; vertical-align: middle; } 13. Alignement vertical dans les tableaux :
La propriété vertical-align est souvent utilisée dans les cellules de tableau (
) pour contrôler l'alignement du contenu dans les cellules. | td { vertical-align: middle; } 14. Alignement des éléments du bloc en ligne :
Vous pouvez utiliser l'alignement vertical pour aligner des éléments de bloc en ligne dans une ligne de texte, par exemple des icônes à côté du texte.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } Ce ne sont là que quelques exemples de gestion de l’alignement vertical dans différents scénarios. En fonction de votre configuration et de vos exigences spécifiques, vous devrez peut-être adapter ou combiner ces techniques pour obtenir les résultats souhaités. CSS fournit divers outils pour gérer efficacement l'alignement vertical dans divers contextes.
N'oubliez pas que même si la propriété d'alignement vertical est utile, des solutions plus complètes existent pour tous les scénarios d'alignement, en particulier pour les éléments au niveau des blocs. Pour les mises en page et les exigences d'alignement plus complexes, il est recommandé d'explorer les techniques de mise en page CSS modernes telles que Flexbox, CSS Grid ou même les valeurs de position CSS (telles que absolues et relatives) pour obtenir les résultats souhaités de manière plus efficace et prévisible.
N'oubliez pas que « alignement vertical » n'affecte que les éléments de niveau en ligne ou les cellules de tableau. Utilisez des techniques telles que la flexbox, la disposition en grille ou le positionnement pour aligner verticalement les éléments au niveau du bloc.
Quelques exemples supplémentaires
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> Testez-le maintenant Sortir
date locale java
Maintenant, il existe un autre exemple dans lequel nous alignons le texte avec l'image.
Exemple
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. Testez-le maintenant Sortir
Avantages de l'alignement vertical en CSS
| Facile à utiliser pour les éléments en ligne : | La propriété vertical-align est simple pour aligner des éléments, tels que des images, des icônes ou du texte, dans une ligne de texte ou d'autres éléments.
| Prise en charge étendue du navigateur : | La propriété vertical-align offre une bonne prise en charge des navigateurs et est largement prise en charge dans différents navigateurs.
| Plusieurs options d'alignement : | Il fournit diverses options d'alignement, telles que la ligne de base, le milieu, le haut, le bas, le texte en haut, le texte en bas, l'indice et l'exposant, offrant aux développeurs la flexibilité d'aligner les éléments en fonction de leurs besoins.
| Alignement réactif : | Il peut être utilisé en responsive design pour adapter l'alignement vertical en fonction de la taille du conteneur ou de l'espace disponible.
| Simplicité pour les éléments en ligne : | Pour aligner de petits éléments comme des icônes ou des images dans une ligne de texte, la propriété vertical-align fournit une solution relativement simple sans nécessiter de techniques de mise en page complexes.
| Réglage fin: | La propriété permet d'affiner la position verticale des éléments, ce qui peut être utile pour atteindre des objectifs de conception spécifiques.
| Cohérence avec les cellules du tableau : | Dans le contexte des tableaux, la propriété vertical-align contrôle l'alignement du contenu dans les cellules du tableau. Cela peut aider à maintenir la cohérence entre les mises en page basées sur des tableaux.
| Combinaison avec du texte : | Il aligne efficacement les éléments avec le contenu du texte, par exemple en alignant des icônes ou des étiquettes en ligne avec le texte adjacent.
| Maintenir les proportions : | Lors de l'alignement d'images ou d'icônes sur une ligne de texte, l'alignement vertical peut aider à conserver les proportions de ces éléments, en particulier lorsqu'il est combiné avec des tailles de police et des hauteurs de ligne appropriées.
| Corrections d'alignement rapides : | Lorsque vous avez besoin de solutions rapides aux problèmes d’alignement vertical, en particulier dans les scénarios avec un contenu mixte, l’alignement vertical peut fournir une solution rapide sans nécessiter une restructuration approfondie de la mise en page.
| Style d'e-mail CSS : | Dans les e-mails HTML, où les mises en page complexes doivent être mieux prises en charge, l'utilisation de l'alignement vertical peut être utile pour l'alignement vertical de base des éléments sans recourir à des feuilles de style externes ou à des techniques complexes.
| Compatible avec l'affichage : | inline-block : la propriété vertical-align est compatible avec les éléments inline-block, permettant un alignement vertical facile de ces éléments dans une ligne.
| Maintenir la cohérence : | Pour les éléments qui font partie de données tabulaires ou qui doivent s’aligner avec des éléments similaires sur différentes lignes ou colonnes, l’alignement vertical peut aider à maintenir la cohérence visuelle.
| Compatibilité du navigateur : | Contrairement à certaines techniques CSS plus récentes, l'alignement vertical fait partie du CSS depuis longtemps et bénéficie d'une bonne compatibilité entre navigateurs.
Inconvénients de l'alignement vertical en CSS
| Limité aux éléments en ligne : | La limitation la plus importante de la propriété vertical-align est qu'elle ne fonctionne que pour les éléments de niveau en ligne ou les cellules de tableau. Cela ne s'applique pas directement aux éléments de niveau bloc. Cela peut rendre l’alignement vertical plus difficile pour les éléments plus grands ou les mises en page complexes.
| Comportement incohérent : | L'alignement vertical peut être délicat et incohérent, en particulier avec différentes tailles de police, hauteurs de ligne et éléments imbriqués. La même valeur d'alignement vertical peut produire des résultats différents en fonction du contexte.
| Particularités du navigateur : | Certains navigateurs plus anciens peuvent avoir des interprétations incohérentes ou des bizarreries avec la propriété vertical-align, ce qui peut conduire à des résultats inattendus. Cependant, ce problème s'est amélioré avec les progrès des navigateurs modernes.
| Contrôle limité sur l'espacement : | La propriété vertical-align traite principalement de l’alignement vertical des éléments, mais elle n’offre qu’un petit contrôle sur l’espacement entre les éléments. L'ajustement de l'espacement nécessite souvent des modifications CSS ou HTML supplémentaires.
| Flexbox et Grid comme alternatives : | Pour les exigences de mise en page plus complexes et l'alignement vertical des éléments au niveau des blocs, les développeurs s'appuient souvent sur Flexbox ou CSS Grid, qui fournissent des solutions plus robustes et prévisibles.
| Ne convient pas au centrage complet : | Bien que l'alignement vertical soit utile pour aligner verticalement des éléments en ligne, il convient au centrage complet (horizontal et vertical) d'éléments au niveau des blocs avec des techniques CSS supplémentaires.
| Nom trompeur : | Le nom « alignement vertical » peut être trompeur car il n'aligne pas l'élément verticalement comme l'attendent souvent les développeurs. Au lieu de cela, il contrôle l'alignement du contenu de l'élément dans sa zone de ligne.
| Complexité avec différentes polices : | Le comportement de l’alignement vertical peut être imprévisible lorsqu’il s’agit d’éléments de différentes tailles de police et hauteurs de ligne. Cela peut rendre difficile un alignement vertical cohérent.
| Limité pour les mises en page complexes : | Il ne convient pas aux mises en page ou aux scénarios complexes dans lesquels vous devez aligner verticalement des éléments plus grands au niveau des blocs dans un conteneur parent.
| Compatibilité entre navigateurs : | Bien que les navigateurs modernes aient amélioré la prise en charge de l'alignement vertical, les navigateurs plus anciens peuvent toujours présenter des incohérences ou un comportement inattendu.
| Techniques alternatives : | Les techniques de mise en page CSS modernes telles que Flexbox et CSS Grid offrent des moyens plus puissants et plus prévisibles pour gérer les exigences de mise en page complexes, notamment l'alignement vertical des éléments en ligne et au niveau des blocs.
| Considérations relatives à l'accessibilité : | L'utilisation de l'alignement vertical pour la mise en page n'est peut-être pas l'approche la plus accessible, car elle pourrait interférer avec les lecteurs d'écran et autres technologies d'assistance. Le HTML sémantique et les techniques CSS appropriées sont souvent de meilleurs choix en matière d'accessibilité.
| Défis de débogage : | Le débogage de comportements inattendus ou de problèmes d'alignement liés à l'alignement vertical peut parfois s'avérer délicat, en particulier lorsqu'il s'agit d'éléments imbriqués et de tailles de police variables.
| Évolution de la mise en page Web : | À mesure que le paysage du développement Web évolue, de nouvelles techniques de mise en page telles que CSS Grid Layout et Flexbox offrent des solutions plus modernes et plus complètes aux problèmes de mise en page, rendant potentiellement l'alignement vertical moins pertinent dans de nombreux scénarios.
Dans l'ensemble, bien que la propriété vertical-align soit pratique pour aligner des éléments en ligne ou des cellules de tableau dans une ligne de texte, les développeurs ont souvent besoin d'autres techniques CSS pour des exigences de mise en page et de positionnement plus avancées, en particulier lorsqu'il s'agit d'éléments au niveau bloc ou de mises en page complexes. CSS Flexbox et CSS Grid sont des alternatives puissantes pour un contrôle plus large de l’alignement et du positionnement.
Conclusion
La propriété vertical-align est utile pour aligner les éléments en ligne dans les cellules de texte ou de tableau. Cependant, il présente des limites et peut être difficile à utiliser efficacement pour des mises en page complexes ou des éléments au niveau des blocs. Les développeurs devraient envisager des techniques de mise en page CSS modernes qui offrent plus de contrôle et de flexibilité sur l'alignement et le positionnement.
