How to display ajax loader gif image in the center fo the di

I have div with ajax-loader gif image .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); But could not get it displayed in the center.Need help with that.………………………

via HTML Language Development » Search Results » ajax:

How to display ajax loader gif image in the center fo the di

I have div with ajax-loader gif image

.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);
But could not get it displayed in the center.
Need help with that.
……………………………………..

HTML

CSS
#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 */
display: block;
Code and Result
……………………………………..

Full screen ajax loader, with some opacity.
using
$(‘#mydiv’).show();
$(‘#mydiv’).hide(); to toggle it.
#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;

……………………………………..

This worked for me too:
.ajax-loader
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;

……………………………………..

You can do it with attribute align

For more info: How to display ajax loader gif image in the center fo the di

HTML Language Development » Search Results » ajax

How to display ajax loader gif image in the center fo the di

Share this post:

Related Posts

Leave a Comment