w3schools - include css in html




Come visualizzare l'immagine al centro di un div (5)

Altro approccio al centro orizzontalmente e verticalmente un'immagine all'interno di un div:

  1. dimensione dell'immagine sconosciuta
  2. dimensione div di unkown
  3. di risposta

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

Ho div con l'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); 
}

Ma non è stato possibile visualizzarlo al centro (sia verticalmente che orizzontalmente). Hai bisogno di aiuto con quello.


La soluzione di Dave Morgan ha funzionato per me.

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

Il problema con tutte le soluzioni di cui sopra è che devi creare qualche immagine o div nel tuo 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;
}

Puoi farlo con l'attributo align

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

Quanto segue presuppone che la larghezza e l'altezza dell'immagine siano note:

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

AGGIORNAMENTO : nei browser moderni margin: auto produrrà il risultato desiderato 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>


Caricatore ajax a schermo intero, con una certa opacità.

utilizzando

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

per attivarlo.

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






css3