Vertical-align milieu avec affichage de la table-cell ne pas travailler sur les images

Je suis en train d'utiliser le vertical-align: middle sur une mise en page à la verticale du centre de parfois du texte, parfois, les images, mais c'est seulement en travaillant sur le texte. Quelqu'un peut me dire pourquoi?

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ J'ai créé un violon aswell

Pourquoi avez-vous besoin display:table-cell?

OriginalL'auteur Elaine Marley | 2013-12-14

  1. 19

    Mettre border: 1px solid black sur votre img, span balises, puis inspectez les deux éléments dans le navigateur dev. console. Vous remarquerez que la durée par défaut est de 100% à hauteur de son parent, alors que l'image a une hauteur (la hauteur de l'image réelle).

    De sorte que vous n'êtes pas vraiment à la verticale l'alignement de ces éléments par rapport à la div, vous êtes juste à la verticale aligner le texte à l'intérieur de la durée de l'élément par rapport à la durée 🙂

    Si vous voulez vraiment utiliser des tableaux pour vertical-centrage, voici le bon code:
    http://jsfiddle.net/WXLsY/

    (vertical-align et display:table-cell aller sur le parent, et vous avez besoin de wrapper table sur eux)

    Mais il y a d'autres façons de le faire (DONC a plusieurs réponses à cette question, il suffit d'utiliser la recherche)

    Dans votre exemple, le vertical-align: middle propriété n'est pas nécessaire pour le img et span éléments enfants. Le reste de la CSS est suffisante, et l'explication est la bonne.
    Correct (il a été laissé sur l'OP du code)
    Je vois bien les tables ne sont pas nécessaire en soi, mais j'ai été de les utiliser avec succès avec le texte. Mon image est sensible donc je ne sais pas la largeur ou la hauteur pour être en mesure de centre par position:absolute par exemple
    essayez de solution. Je l'ai dans mes favoris et à utiliser à chaque fois que je veux aligner verticalement un élément à hauteur variable
    Comment je peux la verticale du centre de la div au lieu de son contenu (quand c'est la hauteur est définie par son contenu et non pas manuellement)?

    OriginalL'auteur nice ass

  2. 4

    Ici est un moyen de résoudre le problème:

    HTML:

    <div>
    <span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div> 
    <span> text </span>
</div>

    Mettre votre img dans un span, l'image est un élément remplacé, il ne peut pas contenir les enfants de contenu, par conséquent, vertical-align ne fonctionne pas.

    CSS:

    div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

    Voir la demo sur: http://jsfiddle.net/audetwebdesign/Fz6Nj/

    Il y a plusieurs façons de faire cela, vous pouvez également appliquer display: table-cell pour le parent div élément, mais ce serait une approche différente.

    OriginalL'auteur Marc Audet

  3. 0

    Afin d'aligner verticalement une image dans une cellule de tableau vous avez besoin pour donner à l'image un affichage de bloc.

    display: block
margin: 0 auto

    le margin: 0 auto est d'aligner l'image vers le centre. Si vous voulez que l'image alignée à gauche, alors ne pas en tenir compte. Si vous voulez que l'image aligné à droite, vous pouvez ajouter:

    float: right

    Grâce,
    G

    OriginalL'auteur Gregg Od

  4. -2

    Vous pouvez essayer en ajoutant -> line-height: 200px; dans le span style de l'article, je pense qu'il pourrait travailler;

    OriginalL'auteur dpuertas