Centrer complètement une image?

Question

J'ai une div et une image dans la div. La taille de l'image peut varier.

Je veux qu'il soit centré horizontalement et verticalement. Css verticle align ne semble pas fonctionner.

Des trucs? Je peux utiliser php, css ou Jquery

Answer 1

Je ne sais pas comment vous l'utilisez, si probablement ma solution ne va pas.

Lorsque vous implémentez l'image comme un « background-image » dans le div que vous pouvez facilement centrer avec « background-position »:

#div { 
background-image: url(./image.png); 
background-position: center center; 
} 

Answer 2

Vous pouvez l'obtenir pour aligner horizontalement à l'aide

margin: 0 auto; 

Centrer verticalement pas facile avec CSS (au moins pas dans IE6/7). C'est relativement facile de le faire avec des tables.

Vous dites que vous avez jQuery disponible. Vous pouvez lancer n'importe quel navigateur en appliquant JavaScript. Mais bien sûr, sans JS activé/supporté, votre page ne s'affichera pas correctement.

CSS propriété vertical-align est uniquement destinée à être utilisée dans quelque chose avec display: table-cell (qui se devrait être quelque chose avec display: table).

Si vous aviez

<div id="container"><img src="my-image.png" alt="" /></div> 

Vous pouvez utiliser jQuery pour le centrer comme celui-ci (comme dans la suggestion faite par plexus)

var imageSrc = $('#container img').attr('src'); 

$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });