Cómo mostrar una imagen en el centro de un div

Question

Cómo mostrar una imagen en el centro de un div

Tengo div con ajax-loader gif image

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

Pero no se pudo mostrar en el centro (tanto vertical como horizontalmente). Necesito ayuda con eso.

38

css html css3

Author: mikemaccana, 2011-08-19

Source

7 answers

Cargador ajax de pantalla completa, con algo de opacidad.

Usando

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

Para alternarlo.

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

12

Author: bulltorious,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-12 16:27:58

Coloque este div justo dentro del área que está actualizando:

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

Y añade esto a tu 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;
}

Cuando quiera mostrarlo, simplemente llame a:

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

O algún equivalente.

6

Author: DaveMorganTexas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-24 00:17:24

Otro enfoque para centrar horizontalmente y verticalmente una imagen dentro de un div:

tamaño de imagen desconocido
tamaño div desconocido
responsive

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

1

Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 11:18:21

Uso:

display:inline-block;

O:

display:block;

Y:

text-align:Center;

Dentro del archivo CSS... Entonces aparecerá

1

Author: nishant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-20 07:20:06

Puedes hacerlo con el atributo align

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

0

Author: Seeker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-21 08:08:39

La solución de Dave Morgan funcionó para mí.

Aquí hay una versión un poco más limpia de la misma.

El problema con todas las soluciones anteriores es que necesita crear alguna imagen o div en su contenedor antes de la mano. Esto supone un despilfarro de recursos y dificulta su aplicación a objetivos concretos. Deje que jquery genere el div en su lugar.

Aquí está mi código:

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

0

Author: Dieter Gribnitz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 16:36:11

score 73 · Accepted Answer

Lo siguiente asume que el ancho y alto de la imagen es conocido:

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

ACTUALIZAR : en los navegadores modernos margin: auto producirá el resultado deseado conociendo el ancho / alto de la imagen:

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