Maison > Article > interface Web > Que signifie l’alignement vertical ? Comment utiliser ?
Que signifie l’alignement vertical ? Comment utiliser ?
- 不言original
- 2019-04-12 14:29:519263parcourir
vertical-align est une propriété en CSS qui peut être utilisée pour définir l'alignement vertical des éléments. Examinons de plus près l'utilisation de la propriété vertical-align. L'attribut vertical-align définit l'alignement vertical de la ligne de base d'un élément en ligne par rapport à la ligne de base de la ligne dans laquelle réside l'élément. Permet de spécifier des valeurs de longueur négatives et des valeurs de pourcentage. Cela abaisse l'élément au lieu de l'élever. Dans les cellules d'un tableau, cette propriété définit l'alignement du contenu des cellules dans la zone de cellule.
baseline : Par défaut. L'élément est placé sur la ligne de base de l'élément parent.
sub : L'indice du texte aligné verticalement.
super : aligner verticalement l'exposant du texte
top : aligner le haut de l'élément avec le haut de l'élément le plus haut de la ligne
text-top : aligner le haut de l'élément avec le haut du parent Alignement supérieur de la police de l'élément
milieu : Placez cet élément au milieu de l'élément parent.
bas : Alignez le haut de l'élément avec le haut de l'élément le plus bas de la ligne.
text-bottom : Alignez le bas de l'élément avec le bas de la police de l'élément parent.
length :
% : utilisez la valeur en pourcentage de l'attribut "line-height" pour organiser cet élément. Les valeurs négatives sont autorisées.
inherit : Spécifie que la valeur de l'attribut vertical-align doit être héritée de l'élément parent.
Par exemple :
alignement vertical du haut consiste à aligner verticalement le haut du texte.Dans le tableau, cet attribut définit l'alignement du contenu des cellules. L'alignement vertical est le plus couramment utilisé dans td pour contrôler la position des objets internes.
Regardons un exemple spécifique :
L'effet de l'opération est le suivant :<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>Cet article s'est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo CSS
du site Web PHP chinois ! ! !Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!