Interpréter l'attribut vertical-align en CSS

Syntaxe :

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

Paramètres :
baseline : aligner le contenu des objets qui prennent en charge la fonctionnalité valign sur la ligne de base
sub : l'indice du texte aligné verticalement
super : Alignez verticalement l'exposant du texte
top : Alignez le contenu de l'objet qui prend en charge la fonctionnalité valign en haut de l'objet
text-top : Alignez le texte de l'objet qui prend en charge la fonctionnalité valign en haut de l'objet
milieu : prendra en charge Le contenu de l'objet avec la fonctionnalité valign est aligné avec le milieu de l'objet
en bas : Aligne le texte de l'objet avec la fonctionnalité valign avec le bas de l'objet object
text-bottom : Aligne le texte de l'objet avec la fonctionnalité valign avec le haut de l'objet
length : CSS2 Une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité ou d'un pourcentage. Peut être négatif. Définit le décalage par rapport à la ligne de base. La ligne de base est 0 pour les valeurs numériques et 0 % pour les pourcentages. Actuellement, IE5 ne le prend pas en charge. Voir unité de longueur

Description :

Définit ou récupère l'alignement vertical du contenu de l'objet.
La fonctionnalité de script correspondante est verticalAlign. Veuillez consulter les autres livres que j'ai écrits.

Exemple :

td { vertical-align : center; }

css Pourquoi l'ajout de vertical-align: middle to span ne fonctionne-t-il pas ?

vertical-align ne fonctionnera que sur les éléments avec certains styles d'affichage (comme le mode d'affichage des cellules : tableau-cellule). Par conséquent, pour obtenir un alignement central vertical de haut en bas, vous pouvez utiliser le style suivant

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

Par rapport à la définition de l'attribut line-height, la méthode de configuration ci-dessus est compatible avec les situations où le texte comporte plusieurs lignes.

Ce qui suit est un exemple :

Créer un Élément HTML

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

Définir le style CSS

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

vertical -align: top; Qu'est-ce que cela signifie ?

vertical-align consiste à définir la disposition verticale des éléments
est utilisé pour définir l'alignement vertical de la ligne de base d'un élément en ligne. par rapport à la ligne de base de la ligne où se trouve l'élément.
Il a plusieurs valeurs : baseline | super top | text-top middle | pour aligner verticalement le haut du texte.
Dans le tableau, cet attribut définit l'alignement du contenu de la cellule est le plus couramment utilisé dans td, contrôlant la position des
objets internes . > L'effet de cet attribut est différent dans chaque navigateur, utilisez-le donc avec prudence.

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!