CSS: Pourquoi "vertical-align: middle" ne fonctionne pas?

Considérons l'exemple suivant: (démonstration en direct ici)

HTML:

<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>

CSS:

a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
}

La sortie est:

CSS: Pourquoi

Pourquoi l'image n'est pas centrée verticalement ?

Comment pourrais-je régler ce problème afin qu'il fonctionne dans tous les principaux navigateurs ?

Merci de ne pas assumer toute la taille de l'image (comme 32x32 dans ce cas), parce que dans le cas réel la taille de l'image est inconnue.

source d'informationauteur Misha Moroshko

  1. 3

    Vous pouvez utiliser position:absolute; pour cela.

    Par exemple:

    a {
    display: block;
    background: #000;
    line-height: 40px;
    height:80px;
    position:relative;  
}

img {
    position:absolute;
    top:50%;
    margin-top:-16px;
}

    NOTE: Cela donne margin-top de la moitié de la taille de l'image.

    Cochez cette http://jsfiddle.net/cXUnT/7/

  2. 1

    Je ne peux pas vraiment vous dire les détails du pourquoi de ce qui se passe (je suis curieux moi-même). Mais cela fonctionne pour moi:

    a {
    display: block;
    background: #000;
    line-height: 40px;  
}
img {
    vertical-align: middle;
    margin-top:-4px; /* this work for me with any given line-height or img height */
}
  3. 1

    Vous devriez avoir display: table-cell je pense, cela ne fonctionne que dans les tableaux.. je utiliser line-height égale à la hauteur de l'élément, et il travaille trop.

  4. 1

    J'ai eu le même problème. Cela fonctionne pour moi:

     <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
  5. 0

    Si vous connaissez la taille verticale de l'élément et de la hauteur de la ligne, alors vous pouvez verticalement centre en utilisant vertical-align: top majoré d'une marge supérieure.

    Pour l'illustration, j'ai créé: http://jsfiddle.net/feklee/cXUnT/30/

  6. 0

    Il suffit de mettre la balise img à l'intérieur d'une balise div de l'ensemble
    display:table-cell vertical-align: middle à la div. Balise Parent devrait être d'affichage:tableau

    Exemple:

    Css

    a {
 display: table;
 background: #000;
 height:200px;
}
div {
 display:table-cell;
 vertical-align: middle;
}

    HTML

    <a>
 <div>
  <img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-  131939.jpeg" />
 </div>
</a>
  7. -1

    Essayez d'utiliser une image de fond sur un <a>:

    <a href="#"></a>    
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}