Maison >interface Web >tutoriel CSS >Explorer l'application à alignement vertical_CSS/HTML

Explorer l'application à alignement vertical_CSS/HTML

WBOY
WBOYoriginal
2016-05-16 12:10:541750parcourir

Comparaison avec valign

L'explication de l'alignement vertical dans le manuel de Xiaoyu est la suivante : définir ou récupérer l'alignement vertical du contenu de l'objet. Ce que je ne comprends pas très bien, c'est que la catégorie de l'alignement vertical est « attribut/texte »

O3noBLOG met particulièrement l'accent sur la différence entre l'alignement vertical et le valign. En effet, l'application la plus courante de l'alignement vertical devrait. be in td , contrôle la position des objets internes et est très similaire à l'attribut valign de td.

valign a quatre paramètres : top, baseline, bottom, middle. Relativement parlant, vertical-align a également les mêmes valeurs d'attribut. Ce qui suit est une comparaison du contrôle td :

Explorer l'application à alignement vertical_CSS/HTML.

C'est un bon choix d'utiliser vertical-align:top; pour éviter le valign="middle" par défaut de td. Bien sûr, vous pouvez également utiliser vertical-align:middle pour contrôler td, mais cela. est définitivement invalide pour div.

Démonstration d'effet : http://www.rexsong.com/blog/attachments/20...1246_valign.htm

Comparaison avec align

Suivez les conseils de w3 et utilisez l'alignement vertical sur les objets en ligne, tels que le contrôle d'img, il est donc similaire à l'attribut align d'img.

Lorsque vous utilisez align="absmiddle" pour contrôler que l'image soit absolument centrée, vous pouvez également essayer d'utiliser vertical-align:middle pour une comparaison afin de voir plus clairement :

Explorer l'application à alignement vertical_CSS/HTML


Le véritable centrage absolu est donc align="absmiddle", qui est irremplaçable en utilisant CSS.

Démonstration d'effet : http://www.rexsong.com/blog/attachments/20...41444_align.htm

application en ligne

est utilisé pour déterminer la position verticale des objets en ligne, voir deux exemples :

Petite image : http://www.rexsong.com/blog/attachments/20.. . ignmenttest.htm
Grande image :http://www.rexsong.com/blog/attachments/20...rticalalign.htm

Déclaration:
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