recherche
Maisoninterface Webtutoriel CSSComment puis-je aligner verticalement des éléments en ligne/blocs en ligne en CSS ?

How Can I Vertically Align Inline/Inline-Block Elements in CSS?

Alignement vertical des éléments en ligne/blocs en ligne dans CSS

Comprendre l'alignement vertical en CSS peut être crucial lors de la création de mises en page alignées verticalement. Malgré l'application des propriétés d'alignement vertical appropriées, les éléments peuvent persister à se déplacer de manière imprévisible.

Prenons l'exemple fourni :

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

Ici, l'élément span reste poussé vers le bas malgré l'application des deux propriétés d'alignement vertical. :milieu;" et "vertical-align:top;".

La clé pour résoudre ce problème réside dans la compréhension que "vertical-align" s'applique aux éléments alignés, et non à leurs conteneurs parents. Pour aligner verticalement les enfants de l'élément "div", utilisez la règle CSS :

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Avec ce changement, les enfants de l'élément "div" s'aligneront verticalement au sein du div parent.

Remarque : "vertical-align" s'aligne par rapport à la ligne de texte actuelle, et non sur toute la hauteur du div du conteneur. Pour centrer les éléments dans un div parent plus grand, définissez la propriété "line-height" du div parent au lieu de sa hauteur. Pour un exemple pratique, reportez-vous au lien jsfiddle fourni dans la question d'origine.

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!

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
Quatre dispositions pour le prix d'unQuatre dispositions pour le prix d'unApr 12, 2025 am 09:40 AM

Assez notable lorsqu'un tweet sur une disposition de Flexbox obtient 8k likes sur Twitter!

Aller au-delà de la compression SVG automatique avec l'élément 'Utiliser'Aller au-delà de la compression SVG automatique avec l'élément 'Utiliser'Apr 12, 2025 am 09:39 AM

Si vous dessinez vos propres fichiers SVG ou si vous les téléchargez à partir d'Internet, des outils comme cet éditeur SVG ou SVGOMG sont vos amis. Comprimer les fichiers avec

Utilisez et réutilisez tout dans SVG… même les animations!Utilisez et réutilisez tout dans SVG… même les animations!Apr 12, 2025 am 09:36 AM

Si vous connaissez les animations SVG et CSS et que vous avez commencé à travailler avec eux souvent, voici quelques idées que vous voudrez peut-être garder à l'esprit avant de sauter dans

Images inclinées sous-titréesImages inclinées sous-titréesApr 12, 2025 am 09:31 AM

Le résultat final du tutoriel d'Eric Meyer sur la création de cette rangée d'images inclinées est assez chic. Mais c'est plus sur le voyage que la destination (là

Redimensionner les valeurs dans les étapes de CSSRedimensionner les valeurs dans les étapes de CSSApr 12, 2025 am 09:28 AM

Il y a en fait une fonction étapes () dans CSS, mais il n'est utilisé que pour l'animation. Vous pouvez dire, par exemple, dire à un élément qu'il est autorisé à croître mais seulement

Les pouvoirs de la grille de la grille de la grilleLes pouvoirs de la grille de la grille de la grilleApr 12, 2025 am 09:23 AM

Soyons dire que nous travaillons sur la page d'accueil d'un site Web d'information. Vous avez probablement l'habitude de voir un contenu basé sur des cartes dans une disposition de grille, non? Ici & # 039; est un classique

Utilise ceciUtilise ceciApr 12, 2025 am 09:22 AM

Une petite interview avec moi sur utilise ceci. Je sauterai l'intro puisque vous savez qui je suis, mais je republierai le reste ici.

Animer le texte sur ScrollAnimer le texte sur ScrollApr 12, 2025 am 09:18 AM

Nous avons couvert l'idée d'animation du texte incurvé il n'y a pas longtemps lorsqu'un article amusant du New York Times est sorti. Tout ce que j'ai fait était de jeter un œil à la façon dont ils l'ont fait et à extraire

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.