Wie man Bild in der Mitte eines div anzeigt

Habe ich div mit ajax-loader gif-Bild

<div id="mydiv" style="height: 400px; text-align: center;">
    <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>
.ajax-loader
{
    /*hidden from IE 5-6 */
    margin-top: 0; /* to clean up, just in case IE later supports valign! */
    vertical-align: middle;
    margin-top: expression(( 150 - this.height ) / 2); 
}

Konnte es aber nicht lassen, es erscheint in der Mitte (vertikal und horizontal). Brauchen Sie Hilfe mit, dass.

InformationsquelleAutor der Frage Joper | 2011-08-19

  1. 12

    Vollbild ajax-loader, mit einigen Deckkraft.

    mit 

    $('#mydiv').show(); 
$('#mydiv').hide();

    Umschalten.

    #mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width /2 */
    margin-top: -32px;  /* -1 * image height /2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

    InformationsquelleAutor der Antwort bulltorious

  2. 6

    Ort dieses div nur innerhalb des Bereichs, den Sie aktualisieren:

    <div id="myLoader" class="ajax-loader"></div>

    , Und fügen Sie diese in Ihre css:

    .ajax-loader {
    cursor: wait;
    background:#ffffff url('ajax-loader.gif') no-repeat center center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
    position: absolute;
    z-index: 10000;
    display: none;
}

    Wenn Sie wollen, um es anzuzeigen, rufen Sie einfach an:

    $('#myLoader').css({
    height: $('#myLoader').parent().height(), 
    width: $('#myLoader').parent().width()
});
$('#myLoader').show();

    oder etwas ähnliches.

    InformationsquelleAutor der Antwort DaveMorganTexas

  3. 1

    Anderen Ansatz zu center horizontaly und verticaly ein Bild innerhalb eines div:

    1. unbekanntes Bild Größe
    2. unkown div Größe
    3. reaktionsschnell Weg

    DEMO

    HTML :

    <div>
    <img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" />
</div>

    CSS :

    div{
    position:relative;
}

img{
    position:absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}

    InformationsquelleAutor der Antwort web-tiki

  4. 1

    Verwenden:

    display:inline-block;

    Oder:

    display:block;

    Und:

    text-align:Center;

    In der CSS-Datei...
    Dann erscheint es

    InformationsquelleAutor der Antwort nishant

  5. 0

    Können Sie tun es mit dem Attribut align

    <div id="mydiv" align="center">
 <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>

    InformationsquelleAutor der Antwort Seeker

  6. 0

    Dave morgan ' s Lösung für mich gearbeitet.

    Hier ist eine etwas sauberere version davon.

    Das problem mit allen oben genannten Lösungen ist, dass Sie brauchen, um zu erstellen ein Bild oder ein div in dem container, bevor die hand. Das ist eine Verschwendung von Ressourcen und macht es schwierig, für bestimmte Ziele. Lassen Sie jquery erzeugen div-statt.

    Hier ist mein code:

    js

    $('#trigger').on('click', function(){
   var target = $('#stage');
   var el = $('<div class="spinner" />').width(target.width()).height(target.height());
   target.prepend(el);
});

    css

    .spinner{
    position: absolute;
    cursor: wait;
    z-index: 10000;
    -khtml-opacity:.50; 
    -moz-opacity:.50; 
    -ms-filter:"alpha(opacity=50)";
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50; 
    background: url('../img/system/ajax.gif') no-repeat center #f8f8f8;
}

    InformationsquelleAutor der Antwort Dieter Gribnitz

Schreibe einen Kommentar