Maison > interface Web > tutoriel CSS > le corps du texte

Explication détaillée des exemples d'attributs d'alignement vertical en CSS

零下一度
Libérer: 2017-04-21 09:27:44
original
2688 Les gens l'ont consulté

Cet article présente principalement une compréhension approfondie de l'attribut vertical-align en CSS. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et lui donner une référence. Venez jeter un œil avec la rédaction

1. Pourquoi écrire cet article

J'ai vu une question aujourd'hui :

Les deux p sont définis pour afficher : inline-block, et l'affichage est normal ; mais lorsqu'un élément de niveau bloc ou un élément en ligne est ajouté au deuxième p, l'affichage change. Pourquoi ?


<meta charset="utf-8"/>
<style>
p{
    width: 100px;
    height: 100px;
    border:1px solid red;
    display: inline-block;
}
.align{
/*    vertical-align: top;*/
}
</style>
<body>
    <p>
    </p>
    <p class="align">为什么?</p>
</body>
Copier après la connexion

La solution est d'ajouter : vertical-align:top à la deuxième p.

Je connais un peu l'alignement vertical et la ligne de base, mais je n'ai pas pu répondre à cette question, je vais donc partager mon résumé d'apprentissage.

2. À quoi sert l'alignement vertical ?

w3c a une information pertinente comme suit :


&#39;vertical-align&#39;
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:      inline-level and &#39;table-cell&#39; elements
Inherited:      no
Percentages:      refer to the &#39;line-height&#39; of the element itself
Media:      visual
Computed value:      for <percentage> and <length> the absolute length, otherwise as specified
Copier après la connexion

Vous pouvez voir le impact de vertical-align Disposition verticale des éléments de niveau en ligne et des éléments de cellule de tableau. Selon la description MDN, l'alignement vertical s'applique également à ::first-letter et ::first-line.

S'applique à :

éléments horizontaux en ligne

en ligne :,,,< ;, élément inconnu

inline-block:(IE8+),

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal