Come visualizzare immagine al centro di un div

Question

ho div immagine gif ajax-loader

<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); 
} 

con ma non poteva farlo visualizzare nel centro (sia in verticale che in orizzontale). Hai bisogno di aiuto con quello.

Answer 1

Quanto segue presume che la larghezza e l'altezza dell'immagine è nota:

#mydiv { 
 
    height: 400px; 
 
    position: relative; 
 
    background-color: gray; /* for demonstration */ 
 
} 
 
.ajax-loader { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -32px; /* -1 * image width/2 */ 
 
    margin-top: -32px; /* -1 * image height/2 */ 
 
}

<div id="mydiv"> 
 
    <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader"> 
 
</div>

UPDATE: in browser moderni margin: auto produrrà il risultato desiderato withing conoscendo la larghezza/altezza dell'immagine:

#mydiv { 
 
    height: 400px; 
 
    position: relative; 
 
    background-color: gray; /* for demonstration */ 
 
} 
 
.ajax-loader { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; /* presto! */ 
 
}

<div id="mydiv"> 
 
    <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader"> 
 
</div>

Answer 2

si può fare con l'attributo align

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

Answer 3

intero schermo ajax loader, con una certa opacità.

utilizzando

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

per attivarla.

#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> 

Answer 4

Luogo questo div appena dentro l'area che si sta aggiornando:

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

e aggiungere questo alla tua 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; 
} 

Quando si desidera visualizzarlo, basta chiamare:

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

o qualche eq uivalent.

Answer 5

altro approccio per centrare orizzontalmente e verticalmente l'immagine all'interno di un div:

1. immagine sconosciuto dimensioni
2. div sconosciuta dimensione
3. reattivo

DEMO

HTML:

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

CSS: la soluzione di

div{ 
    position:relative; 
} 

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

Answer 6

Dave Morgan ha lavorato per me.

Ecco una versione un po 'più pulita di esso.

Il problema con tutte le soluzioni di cui sopra è che è necessario creare alcune immagini o div nel contenitore prima mano. Questo è uno spreco di risorse e rende difficile l'applicazione a obiettivi specifici. Lascia che jquery generi invece il div.

Ecco il mio codice:

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; 
} 

Answer 7

Usa:

display:inline-block; 

Oppure:

display:block; 

E:

text-align:Center; 

All'interno del file CSS ... Poi apparirà