vertical-align: le milieu ne fonctionne pas comme prévu

Je veux juste placer des images dans un conteneur à hauteur fixe: les images ne doivent pas dépasser la hauteur du conteneur et doivent être centrées verticalement.vertical-align: le milieu ne fonctionne pas comme prévu

J'ai donc

<div id="partenaires"> 
    <img src="images/partenaires/Debian.png" alt="Debian" /> 
    <img src="images/partenaires/Fedora.png" alt="Fedora" /> 
    ... 
</div>

avec

#partenaires { 
    height:3em; 
    line-height:3em; 
    white-space:nowrap; 
    overflow:hidden; 
    clear:both; 
} 
#partenaires img { 
    vertical-align:middle; 
    margin:0 1em; 
    max-height:100%; 
}

Mais il semble de grandes images sont tronqués sur le fond comme celui-ci (pour tous les navigateurs) car vertical-align:

alt text

Comment je devrais faire ce que je veux? Je ne comprends vraiment pas ce comportement ...

Merci d'avance!

EDIT: vous pouvez essayer tout ce que vous voulez here!

Source

2010-11-24 MatTheCat

'hauteur: 3em; overflow: hidden' rend ce quelque peu attendu je pense. Pouvez-vous supprimer la règle de dépassement de capacité? –

Malheureusement non, je l'utilise pour implémenter un curseur. Mais je suis sûr que la hauteur des images est bien celle du conteneur, elles ne sont juste pas centrées verticalement! – MatTheCat

@Mat ce qui se passe si vous supprimez le 'line-height'? –

Je suppose que vous devriez utiliser une valeur de hauteur de ligne de 2.7em parce que les lignes ont de l'espace supplémentaire au-dessus et en dessous d'elles donc une hauteur de ligne de 3em ne rentrera pas dans une div de hauteur 3em, c'est pourquoi vos images sont rognées.

éditer: 2.78 semble bon.

Source

2010-11-24 09:26:26 Michael

Yeeaah c'était cela merci beaucoup !! – MatTheCat

vous pouvez utiliser align = "absmiddle" plutôt que vertical-align: middle;

espère que cela vous aidera

Source

2010-11-24 08:27:23

Non, c'est pareil = '( – MatTheCat

vertical-align:baseline; fonctionne comme prévu (note: j'ai essayé seulement sur Safari et FF) ou retirer overflow:hidden du contenant (si vous avez défini pour but de compensation juste changer la méthode de compensation)

Source

2010-11-24 08:53:35

Presque le même comportement mais les petites images sont dans le bas – MatTheCat

puis retirez le débordement: caché –

Lisez mon premier commentaire Si le comportement correct ne peut pas être atteint Je vais essayer une autre structure – MatTheCat

vertical-align: le milieu ne fonctionne pas comme prévu

Répondre

Questions connexes