It turns out that I have a div
where I show a gif that will be used to give the sensation of loading in a login.
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;*/
}
Adding the line display:none;
(which is commented for the example here), the thing is that when I use it $('.cargarGif').toggle()
to show the hidden gif while doing the login validation, it shows me like this and not originally in the center:
What is the problem? Thank you
Your problem is that an image is a
inline
default element, so it won't take into account the automatic margins. For this, it will be necessary for the image to be of typeblock
(that is why when you adddisplay: block
it, it is centered where you want).I recommend that you change the method
toggle
totoggleClass
because with the first one you won't be able to indicate that you want your image to appear with thedisplay: block
. However, with the second function you can tell it that you want it to add (or remove) a specific class in which said property will be.Your modified example:
As you can see, in this case I have set the default property to be
display: none
but with the functiontoggleClass
we add the classbloque
that adds thedisplay: block
to the image making it center as you expected.