Can't Centre Image In Div

Question

<div style={{textAlign:'center !important',margin:'0 auto !important'}}>
     <img className="lazy" src={require("../images/dragonfire.jpg")} style={{display:'block !important', margin:'auto !important', position:'absolute', left:'0',right:'0',top:'0',bottom:'0',height:'40em',width:'40em'}}/>
</div>

I have looked through a lot of posts here and external sites as well on this topic and it seems that nothing is working. I have a big image that I just want it to be centered in the screen view. The div is a background for the banner on a page. I can get it to the right size but it just shows the left half of the image, I cannot get it to center and just cut off the left and right sides depending on the sides of the screen.

Position absolute is bugging. You want the image part of the flow. The `absolute` is taking it out the flow. — Daniel, Jun 11 '18 at 16:02
https://ibb.co/dNoUiT I have tried both these things but it's still messed up in the same way @TemaniAfif — Alex Barbulescu, Jun 11 '18 at 16:24
Possible duplicate of [How to make an image center (vertically & horizontally) inside a bigger div](https://stackoverflow.com/questions/388180/how-to-make-an-image-center-vertically-horizontally-inside-a-bigger-div) — manAbl, Jun 11 '18 at 16:28

score 1 · Accepted Answer · answered Jun 11 '18 at 16:41

Try removing:
left:'0',right:'0',top:'0',bottom:'0'

This is fixing the position of your image to the top-left corner.

Also as @Daniel has mentioned in the comments, change the position:absolute to relative since it restricts the flow of the content inside the div.

Here is the working model:

div{
  background: red;  /*Just for clarrification case*/
  textAlign: center !important;
  margin: 0 auto !important;
}

img{
 display: block !important;
 margin: auto !important;
 position: relative;
 height: 100px;
 width:100px;
}

<div>
     <img className="lazy" src="http://mxtrianz.me/wp-content/uploads/2017/05/small-pictures-20-the-data-lab.jpg"/>
</div>

P.S. Comment on your code: Please try using external or internal styling and refuse using inline styling as it reduces the readability of your code.

Can't Centre Image In Div

1 Answers1