首先,请检查此fiddle。 gif图像和文本的位置恰好是我现在所需的位置。但是,当我拖动窗格并调整其大小时,gif图像的位置会改变。我希望gif图像即使在调整窗口大小时也要保持在“加载”文本居中的顶部。我怎样才能做到这一点?我尝试使用position: relative
,但是我的CSS知识几乎是最底层的。有人可以帮我这个忙吗?
非常感谢。
旁注:上面提供的小提琴最初来自此question。感谢Robert Koritnik的回答。
最佳答案
如何在<img>
内部移动<div>
并使用负向定位将其移动到Loading...
文本上方?
的HTML
This is some content
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>
<button>click</button>
的CSS
div#blocker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
background-color: #000;
z-index: 1000;
overflow: auto;
}
div#blocker div {
position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
div#blocker img {
position: relative;
top: -55px;
left: 15%;
}
的JavaScript
setTimeout(function() {
document.getElementById("blocker").style.display = 'none';
}, 3000);
并且作为您的updated fiddle也。
关于css - CSS相对定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8683373/