Vertical align ne fonctionne pas sur inline-block
M'a dit que:
Vertical align ne fonctionne qu'en ligne,inline-blocks,des images et de la table
éléments.
Il doit être appliqué sur l'élément enfant, que s'opposer à la
élément parent, à la différence text-align.
Cependant, quand j'ai essayé de mettre le vertical align milieu sur un inline-block élément, il ne fonctionne pas. Pourquoi?
CSS:
#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}
HTML:
<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>
- Je voulais dire moyen. Et avant de vous demander, oui, le moyen est une valeur valide. w3schools.com/cssref/pr_pos_vertical-align.asp Et ce que tu veux dire par la ligne de la boîte?
- Aussi, je ne suis pas à la recherche d'une façon différente de le faire. Je suis à la recherche d'une explication de pourquoi cela ne fonctionne pas, merci donc de prendre au large de la double marque.
- Si je comprends bien, vous parlez #contenu de la boîte de ligne? Parce qu'il y a seulement 2 éléments ici, le #wrapper, et #contenu.
- donc, la ligne de boîtes existent seulement quand il y a plus de 1 inline ou inline-block éléments dans un seul conteneur parent? Mais ils sont invisibles, non? En gros, à chaque ligne de inline-block éléments est une zone de ligne? Si je comprends bien?
Vous devez vous connecter pour publier un commentaire.
Cela ne fonctionne pas car
vertical-align
définit l'alignement de la ligne de niveau de contenu à l'égard de leur zone de ligne, pas de leur bloc contenant:Un zone de ligne de est
Quand vous voyez un texte qui contient plusieurs lignes, chacune d'elle est une zone de ligne. Par exemple, si vous avez
CSS:
HTML:
S'il n'existe qu'une seule ligne, comme dans votre cas, c'est aussi une zone de ligne de
À l'aide de
vertical-align: middle
centres.content
verticalement à l'intérieur de cette ligne de la boîte. Mais le problème est que la zone de ligne n'est pas centrée verticalement à l'intérieur du bloc contenant.Si vous voulez centrer quelque chose à la verticale au milieu du bloc contenant le voir Comment aligner le texte verticalement au centre de div avec du CSS?
#content{line-height: 500px}
jsfiddle.net/28ng9ovswhite-space: nowrap
pour éviter les sauts de ligne.Vertical-align
sur inline /inline-block élément, images, texte... aligner élément ensemble, pas avec les parents.Exemple d'utilisation: aligner l'image de smiley dans un texte
vous pouvez tricher en ajoutant un 0px largeur, 100% de la hauteur de la pseudo-élément
CSS:
HTML:
Fonctionner pour moi en utilisant vertical-align:text-top;
jsfiddle