首先,请检查这个fiddle 。 gif 图像和文本的位置正是我现在需要的位置。但是当我拖动 Pane 并重新调整其大小时,gif 图像的位置发生了变化。我希望 gif 图像即使在调整窗口大小时也能保持在“正在加载”文本的顶部居中。我怎样才能做到这一点?我尝试使用 position:relative
但我的 CSS 知识几乎垫底。有人可以帮我解决这个问题吗?
非常感谢。
旁注:上面提供的 fiddle 最初来自此 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 相对定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8683373/