Wie zu zentrieren, Bild in einem div horizontal und vertikal

Habe ich das folgende markup-code in meine Seite:

<div id="root_img" style="width:100%;height:100%">
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;">
        <a id="a_img_id" href="./css/imgs/mancante.jpg">
            <img id="img_id" src="./css/imgs/mancante.jpg" />
        </a>
    </div>
</div>

Und es wird nicht angezeigt wie ich es erwartet habe, es so aussieht:

Wie zu zentrieren, Bild in einem div horizontal und vertikal

Aber ich wollte das Ergebnis:

Wie zu zentrieren, Bild in einem div horizontal und vertikal

Wie kann ich center das Bild horizontal und vertikal?

Warum sind Sie mit 4 tags anstelle von 2 ? <a style="padding:X"><img /></a> sollte funktionieren.
Ich siehe Bild am unteren Rand des div-X rapresent etwas oder ich habe, um es einige Werte?
X könnte alles, was gut für Sie: "5%", "10px, 0" ... Auch könnte man das Bild unten mit "background-image" und "background-position" auf dem Haupt-div
mögliche Duplikate von Wie vertikal ausrichten ein Bild im div

InformationsquelleAutor CeccoCQ | 2012-04-24

  1. 5

    Für die vertikale Ausrichtung, ich würde einige CSS zu positionieren, es aus der top-50% und dann verschieben Sie es auf die Hälfte der Anzahl an Pixeln Höhe des Bildes.

    Horizontalen, würde ich eine Marge, wie vorgeschlagen.

    Also, wenn Ihr Bild war 100x100px Sie würde am Ende mit.

    <img id="my_image" src="example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>
    Ich habe versucht, aber ich habe das Bild am unteren Rand div.
    Ja, sorry, ich habe nicht gelesen das markup. Nur wenden Sie es auf die <a> statt, als dass die Verpackung Ihrer <img>
    Gleiche Ergebnisse... 🙁

    InformationsquelleAutor David Yell

  2. 0

    Gibt es zwei Aspekte, die Sie ansprechen müssen. Erster Aspekt ist die horizontale Ausrichtung. Dies ist leicht erreichbar mit dem margin: auto angewendet auf das div-element umgibt das Bild selbst. DIV muss die Höhe und Breite einstellen, um die Bildgröße (sonst wird das nicht funktionieren). Erreichen vertikal zentriert ausrichten müssen Sie einige javascript, um die HTML. Dies ist, weil HTML die Höhe ist nicht bekannt, auf den Start der Seite und kann sich später noch ändern. Die beste Lösung ist, um jQuery verwenden und schreiben folgenden script:
    $(window).bereit( Funktion() { /* Zuhören Fenster ready-Ereignis ausgelöst, nachdem die Seite geladen wird*/
    repositionCenteredImage();
    });

        $(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
        repositionCenteredImage();
    });

    function repositionCenteredImage() { /* reposition our image to the center of the window*/
        pageHeight = $(window).height(); /*get current page height*/
        /*
        * calculate top and bottom margin based on the page height
         * and image height which is 300px in my case.
         * We use half of it on both sides.
         * Margin for the horizontal alignment is left untouched since it is working out of the box.
        */
        $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

    HTML-Seite, die zeigt, das Bild sieht wie folgt aus:

        <body>
        <div id="pageContainer">
            <div id="image container">
                <img src="brumenlabLogo.png" id="logoImage"/>
            </div>
        </div>
    </body>

    CSS angebracht, um die Elemente sieht wie folgt aus:

    #html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

#pageContainer { /*css for the whole page*/
    margin: auto auto;   /*center the whole page*/
    width: 300px;
    height: 300px;
}

#logoImage { /*css for the logo image*/
    width: 300px;
    height: 300px;
}

    Können Sie die gesamte Lösung aus unserer Firmen-homepage unter der folgenden url:

    http://brumenlab.com

    InformationsquelleAutor Boro Brumen

  3. -1

    Probieren Sie etwas wie dieses:

    <div style="display:table-cell; vertical-align:middle">
 "your content"
</div>
    Bild-und text-richtet sich anders.

    InformationsquelleAutor Key-Six

  4. -1

    mit margin-top

    Beispiel-css

     #id_immagine{
  margin:0 auto;
   }

    InformationsquelleAutor srini

Schreibe einen Kommentar