Comment centrer une image dans une balise img en utilisant la position d'arrière-plan CSS ?

Question

J'utilise la balise HTML IMG pour créer un lien vers une image et je veux la centrer dans un div, mais je n'y arrive pas.

Mon html est :

     <div class="alimgholder">
<img  title="<?php echo $album_title;?>" alt="<?php echo $album_title;?>" src="<?php echo $album_pic;?>">
     </div>   

Mon css est :

              .alimgholder
             {
             width:160px;
             height:120px;
             overflow:hidden;
             float:left;
             }
             .alimgholder img
             {

             background-color: #EEEEEE;
             background-position: center 25%;
             background-repeat: no-repeat;
             display: block;
             }

Answer 1

Définir le css pour le div seulement -

.alimgholder
         {
         width:160px;
         height:120px;
         overflow:hidden;
         float:left;
         background-image: url(path/to/your_image);
         background-color: #EEEEEE;
         background-position: center 25%;
         background-repeat: no-repeat;
         display: block;
         }        

Pour ce qui est du problème dynamique, vous pouvez utiliser la balise img pour charger l'image, mais le cacher et lire son src uniquement pour définir l'arrière-plan avec jQuery, comme cela -

 $("#div_id").css("background-image", $("#img_id").attr("src"));

Answer 2

.alimgholder
{
     ...
     text-align: center;
}

sinon vous alignez l'image d'arrière-plan de l'image.

Edit : Si vous voulez que votre image soit définie comme l'arrière-plan de votre div, vous devez la charger depuis css et oublier votre balise img :

.alimgholder
{
     background: url(path/to/image) center no-repeat;
     ...
}

Answer 3

Si vous n'avez que l'image à l'intérieur du div, vous pouvez utiliser.. :

margin-left: auto;
margin-right: auto;

au sein de votre .alimgholder code CSS mais cela centrerait le contenu de l'ensemble de la <div> horizontalement.