Div Centralizada

Asked

Viewed 211 times

0

This div of mine is not in the middle of the screen, this wrong CSS style ?

<div style="position:absolute;margin:auto;">
    <img src="assets/img/PHP.png"/>
</div>
css

  • Try using <center><div> <img src="Assets/img/PHP.png"/> </div></center>

  • Try to give a size to div (width) and put margin 0 auto.

  • So <center><div> <img src="Assets/img/PHP.png"/> </div></center>

  • Right, but I need it to stay above my footer, and away from Botton 50px

  • In the middle vertical, horizontal, or both?

  • so I need position:Absolute and Botton:50px

  • For the image to be centered on the screen horizontally and above the bottom 50px

Show 2 more comments

1 answer

3


.div{
   width: 200px;
   height: 100px;
   background: black;
   margin: 0 auto;
}
<div class="div">
   <img src="test.jpg">
</div>

Follow an example..

After reading the comments above, follow the edition 

.div{
  width: 100px;
  height: 100px;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}
<div class="div">
    
  </div>

Updated example

.div{
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      bottom: 30px;
      z-index: 99999999
    }
    
footer{
      width: 100%;
      height: 50px;
      background: black;
      margin-top: 200px;
      bottom: 0;
      position: absolute;
}
<div class="div">
  <img src="https://forum.imasters.com.br/uploads/monthly_2017_02/mascote.png">
</div>

<footer>

</footer>

  • For the image to be centered on the screen horizontally and above at the bottom 50px ?

  • So it’s getting up would have to be 50px from the bottom of the screen

  • @Paulomaia I didn’t understand, you want, center the image and leave it at the bottom with 50px distance from the bottom?

  • @Paulomaia Oce can put an example image, to make it easier to understand?

  • Yes that’s right, the image needs to be at the bottom of my page ( in floating mode ) to stay above my existing footer and 50px detached from the bottom

  • See example of the mascot of the imaster Forum see this link and va until the end of the page https://forum.imasters.com.br/

  • Rafael, puts bottom: 50px; and that’s it, no?

  • So ? <div style=" width: 100px; height: 100px; position: Absolute; left: 50%; margin-left: -50px; bottom: 50px;"> <img src="Assets/img/PHP.png"/> </div>

  • @Paulomaia yes, but better to use a class than everything like that in style...

  • @Paulomaia I updated the code

  • BUT WHEN YOU ROLL THE PAGE THE IMAGE GOES ALONG WHEN YOU SHOULD BE IN THE FOOTER

  • and not this centralized I used the class div as guided

  • Hasn’t worked yet

  • @Paulomaia as so did not work? what the current problem?

  • when loading the page the image appears not centered but 30% of the left and it should appear there in the footer only when I scroll to my footer is that I will see it centered on top of my footer.

  • I haven’t been able to make it stand at the bottom and centered

  • @Paulomaia I will set another example

  • OK Because here making css changes I still can’t

  • @Rafael Augusto , some success ?

Show 14 more comments

Browser other questions tagged css

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