Vertical Align Moyen d'une image dans une balise dans un div

Cela a probablement été fait avant, mais je ne peux pas trouver une solution pour mon cas précis. J'ai le texte suivant:

<div class="holder" style="height:260px;width:260px;">
<a href="#"><img src="image.jpg" /></a>
</div>

Comment puis-je obtenir de l'image afin de l'aligner dans le milieu de la div?

InformationsquelleAutor David | 2012-03-06
  1. 3

    Normalement, img est un inline-élément, ce qui signifie, qu'il soit aligné sur la ligne de base du texte de votre parent-élément. Cela laisse un méchant de l'espace en dessous de votre image.

    Vous pouvez éviter cela avec

    img{
   display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}

    Ce qui supprime l'espace réservé sous l'image.

    vous pouvez modifier l'alignement par

    img{
   vertical-align: [top|middle|bottom|baseline|...] ;
}

    de l'aligner en fonction de votre texte.

    En général, vous ne pouvez vertical-align éléments inline. Donc une image avec display:block ne sera pas affectée par un alignement vertical de la déclaration.

    InformationsquelleAutor Christoph
  2. 0

    Ajouter

    text-align: center;
vertical-align: middle; 
display: table-cell;

    à la div style.

    InformationsquelleAutor xato
  3. 0

    Essayer :

    .img
{
display: block;
margin-left: auto;
margin-right: auto 
}
    InformationsquelleAutor tetuje
  4. 0

    Si c'est votre marque, alors vous pouvez utiliser line-height bien pour cela. Comme ceci:

    .holder{
    line-height:260px;
}
    InformationsquelleAutor sandeep