2

Resulta que tengo un div donde muestro un gif que se va usar para dar la sensacion de carga en un login.

introducir la descripción de la imagen aquí

DIV

<div class="row">
     <div class="col-12 alerta1">
          <img src="~/Content/images/3 (2).gif" class="cargarGif" />
     </div>
</div>

CSS

.cargarGif {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    /*display:none;*/
}

Agregando la linea display:none; (Cosa que esta comentada para el ejemplo aca), la cosa es que cuando uso $('.cargarGif').toggle() para mostrar el gif oculto mientras hace la validacion de login me lo muestra asi y no originalmente en el centro:

introducir la descripción de la imagen aquí

Cual es el problema? Gracias

1 respuesta 1

2

Tu problema reside en que una imagen es un elemento inline por defecto, por lo que no va a tener en cuenta los márgenes automáticos. Para ello, va a ser necesario que la imagen sea de tipo block (es por eso por lo que cuando añades display: block si que se centra donde tu quieres).

Te recomiendo que cambies el método toggle por toggleClass ya que con el primero no le vas a poder indicar que quieres que tu imagen aparezca con la propiedad display: block. Sin embargo, con la segunda función si que podrás indicarle que quieres que agregue (o quite) una clase concreta en la cual estará dicha propiedad.

Tu ejemplo modificado:

$(".cargarGif").toggleClass("bloque");
.cargarGif {
    display: none;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
}

.bloque{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
     <div class="col-12 alerta1">
          <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1.png" class="cargarGif" />
     </div>
</div>

Como podrás observar, en este caso la propiedad por defecto he puesto que sea display: none pero con la función toggleClass le añadimos la clase bloque que agrega el display: block a la imagen haciendo que esta se centre como esperabas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.