img align verticale dans div maître

j'ai vu beaucoup de questions comme celle-ci, mais je ne peux pas sembler trouver la réponse:img align verticale dans div maître

j'ai une photo avec une taille de fichier MAX de 128 par 128 px certains sont cette taille, mais j'ai aussi 128 * 90, 60 * 60, 58 * 78 etc.

maintenant je veux l'aligner verticalement dans un div; Ive vu des exemples avec top 50% et la marge -25px si elle est un img avec une hauteur de 50px, mais je ne sais pas à l'avance ... heigth

grtz, michel

Source

2009-08-29 Michel

Vous pouvez utiliser JQuery pour obtenir la hauteur des images, puis définissez la marge: -height/2

ou ..

vous pouvez définir l'image comme arrière-plan de la div contenant, quelque chose comme:

background:url(image.jpg) no-repeat center center;

Source

2009-08-29 18:14:25 Aziz

i charger l'image dynamicly, si je vérifie la largeur après cela, il me donne 0 (zéro) – Michel

peut-être la deuxième méthode (image de fond) fonctionnerait? – Aziz

utiliser "arrière-plan", pas "background-image" – Aziz

Quelque chose comme ça?

<!doctype html> 
<style> 
    div#parent { 
    background:blue; 
    height:500px; 
    } 

    div#child { 
    position:relative; 
    top:50%; 
    zoom:1; /* haslayout */ 
    } 

    div#ie-helper { 
    position:relative; 
    text-align:center; 
    top:-25%; 
    zoom:1; /* haslayout */ 
    } 
</style> 
<div id="parent"> 
    <div id="child"><div id="ie-helper"> 
    <img src="http://www.gravatar.com/avatar/6f6f22658c768b1162200786e3407890?s=32&d=identicon&r=PG"> 
    </div></div> 
</div>

Source

2009-08-29 18:29:11

cela a fait l'affaire aussi, merci – Michel

La seule façon de centrer quelque chose verticalement en HTML/CSS jusqu'à présent est d'utiliser une cellule de table - qui est le seul élément qui prend en charge le centrage vertical dans tous les navigateurs. Pour une image cependant, je la définirais simplement comme l'image d'arrière-plan de la DIV, car vous pouvez centrer les images d'arrière-plan verticalement.

Source

2009-08-29 18:32:17

vous pouvez compter sur le positionnement et les pourcentages, ce qui est la méthode la plus cohérente. –

ne fonctionne pas dans les vieux-à-dire de mais vous garder un code propre et tableless et utiliser les fonctions de table avec

.foo { 
    height: 300px; 
    display: table-cell; 
    vertical-align: middle; 
} 
<div class="foo">hi</div>

Source

2012-04-02 23:11:23 benstraw

img align verticale dans div maître

Répondre

Questions connexes