HTML-CSS覆盖覆盖整个页面与中心元素 [英] HTML-CSS overlay covering whole page with centered elements

问题描述

我想在中心创建一个简单的全屏幕覆盖，加载器和文本。我有一些问题的文本。我想让图片> 文字。你能帮我一下吗？

I want to create a simple full-screen overlay with loader and text in the center. I have some problems with the text. I want the image to be over ABOVE the text. Can you help me with this?

<div id="loadingOverlay" class="loader-overlay">
    <div class="loader-content loader-center">
        <img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center" alt=""/>
        <div class="loader-center loader-text">Loading, please wait...</div>
    </div>
</div>

http://jsfiddle.net/bLz7wgvs/2/

[edit]

对不起，我的英语。我的意思是上面，而不是下面...

[edit]
Sorry for my English. I meant "above", not "under"...

它应该像：

                               [-------------loader here-------------]
           Loader text (plz wait, etc.) in one line, both centered horizontally and vertically

推荐答案

编辑

我不知道你想让图片显示在文字上方。我已经更改了一些代码： http://jsfiddle.net/bLz7wgvs/7/

I didn't know you wanted to let the image appear above the text. I've changed your code a little bit: http://jsfiddle.net/bLz7wgvs/7/

CSS：

.loader-overlay {
    -ms-opacity: 0.9;
    background: #444;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 100%;
    z-index: 100000;
}

.loader-content {
    margin-left: auto;
    margin-top: auto;
    width: 50%;
}

.loader-center {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);   
    left: 50%;
    display: block;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -55%);
}

.loader-text {
    color: #FFF;
    font-size: 18px;
    height: 50%;
}

这篇关于HTML-CSS覆盖覆盖整个页面与中心元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！