Vertical Align Middle ein Bild in einem a-tag in einen div

Dieser hat wohl auch schon gemacht, aber ich kann nicht finden, eine Lösung für meinen spezifischen Fall. Ich habe Folgendes:

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

Wie bekomme ich das Bild ausrichten, in der Mitte des div?

InformationsquelleAutor David | 2012-03-06

  1. 3

    Normalerweise img ist ein inline-element, was bedeutet, dass es ist ausgerichtet auf die Grundlinie des Textes, die von Ihrem Eltern-element. Das hinterlässt einen fiesen Raum, die sich unter Ihrem Bild.

    Können Sie verhindern, dass diese mit

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

    Dadurch entfällt der reservierte Platz unter dem Bild.

    können Sie ändern Sie die Ausrichtung von

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

    ausgerichtet nach Ihren text.

    Im Allgemeinen, Sie können nur vertical-align inline-Elemente. So ein Bild mit display:block sind nicht betroffen durch eine vertikale Ausrichtung der Erklärung.

    InformationsquelleAutor Christoph

  2. 0

    Hinzufügen

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

    div ' s Stil.

    InformationsquelleAutor xato

  3. 0

    Versuchen :

    .img
{
display: block;
margin-left: auto;
margin-right: auto 
}

    InformationsquelleAutor tetuje

  4. 0

    Wenn dies Ihr markieren, dann können Sie line-height - Eigenschaft für dieses. Wie diese:

    .holder{
    line-height:260px;
}

    InformationsquelleAutor sandeep

Schreibe einen Kommentar