Alignment Gif Loading

Asked

Viewed 817 times

2

Hello,

I have the following code:

https://jsbin.com/jojukiseze/1/edit?html,css,output

I’m trying to align it so that it is centered on the screen regardless of screen size or orientation (whether a mobile phone vertical or horizontal), but without success.

Any suggestions?

Thank you!

html css sass

  • Put html and css to what you’re asking....

  • is all on the @Magichat link

2 answers

2


For position: absolute you can solve by putting 0 on all sides. Your CSS would look like this:

.ajax-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 225px;
    margin: auto;
    opacity: 1;
}

  • Perfect Leon, simple and efficient, thank you very much!!

  • Glad you could help! :)

  • I really look good...

2

Good a solution would be with Flexbox:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="mask-loading">
    <figure class="alinha-loading">
      <img class="ajax-spinner img-responsive" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/585d0331234507.564a1d239ac5e.gif" alt="carregando...">
    </figure>
  </div>
</body>
</html>
<style>
.mask-loading{
	position: fixed;
	z-index: 100;
	background-color: #000;
	opacity: 0.8;
	width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.alinha-loading{
    z-index: 1000;
    width: 225px; 
	opacity: 1;
    max-width: 50%;
  
}
</style>

Browser other questions tagged html css sass

You are not signed in. Login or sign up in order to post.