[英]Center an image on top of a div
I have a div with a bunch of stuff in it and what I want to do is place an image, centered, on top of it. 我有一个带有一堆东西的div,我想要做的是放置一个图像,居中,在它上面。 My basic layout looks something like this: 我的基本布局看起来像这样:
<div>
<img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" />
<!-- a bunch of tables and stuff that doesn't have a conveniently fixed size -->
</div>
The above will center the image in the screen (the image is 66px x 66px BTW), but I want it centered relative to the parent div and "floating" above it. 以上将使图像在屏幕中居中(图像为66px x 66px BTW),但我希望它相对于父div居中并在其上方“浮动”。 Is there a purely css way of doing this? 有一种纯粹的CSS方式吗? Needs to work in IE8 and recent Firefox versions. 需要在IE8和最近的Firefox版本中工作。
Edit: just to clarify - I'm looking to center both horizontally and vertically and on top of the parent. 编辑:只是为了澄清-我期待的水平和垂直和对父母的顶级中锋。
只需要把它放在你的父div上:
position: relative;
You can use: 您可以使用:
<div>
<img style="display:block; position: relative; margin:auto" src="Images/ajax-loader_001.gif" />
<!-- a bunch of tables and stuff that doesn't have a conveniently fixed size -->
</div>
This will work for sure. 这肯定会起作用。
You should remove all the absolute positioning stuff and instead do this img { display: block; 你应该删除所有绝对定位的东西,而是做这个img {display:block; margin: 0 auto; 保证金:0自动; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.