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>

我已经在这里和外部网站上查看了很多关于此主题的帖子，似乎没有任何工作。我有一个大图像，我只想让它在屏幕视图中居中。 div是页面上横幅的背景。我可以将它调到合适的尺寸，但它只显示图像的左半部分，我无法将其置于中心位置，只是根据屏幕的两侧切断左右两侧。

Answer 1

尝试删除：
left:'0',right:'0',top:'0',bottom:'0'

这是将图像的位置固定在左上角。

正如@Daniel在评论中提到的，将position:absolute更改为relative，因为它限制了div内部的内容流。

以下是工作模式：

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。评论您的代码：请尝试使用外部或内部样式并拒绝使用内联样式，因为它会降低代码的可读性。

不能在Div中居图像

1 个答案: