0

在 Web 开发方面迈出小步。我有一个应用程序，它的加载器屏幕与这个 Fiddle非常相似。

在桌面浏览器上，文本/图像垂直和水平居中（无论如何对眼睛而言）看起来是可以接受的。

但是，当您在较小的屏幕尺寸上查看我的应用程序时，文本/图像开始无法与屏幕中心水平对齐。

我一直在阅读许多相关的帖子和​​博客，但无论设备宽度如何，我都无法让我的文本/图像保持居中。这可以通过调整小提琴预览的大小以使其更薄来复制。

<div id="preloader">
<div class="preloaderContent">
    <div id="loadLabel">Please Wait</div>
    <img src="http://www.igfa.org/images/throbber.gif"><br>
    </div>
</div>

#preloader {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    background:#3399FF;
    z-index:999;
}

.preloaderContent {
    position: absolute;
    left: 45%;
    top: 40%;
}

.preloaderContent img {
    display : block;
    margin : auto;
    text-align: center;
}

#loadLabel {
    padding-bottom: 10px;
    font-size: 30px;
    font-weight: 300;
    font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif';
    color: #FFFFFF; 
    text-align: center;
}

抱歉，这有点乱。有人能以我的方式指出错误吗？

4

5 回答 5

1

你想输入这样的东西：

.preloaderContent {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;/*half of height*/
    margin-left: -100px;/*half of width*/
}

负边距意味着 div 的中心位于中心而不是左上角。这将根据浏览器窗口大小调整大小。示例：http: //jsfiddle.net/z3zpz/2/

于 2013-04-23T10:05:56.743 回答
0

您需要添加一些响应式 css。

@media (min-width: 768px) and (max-width: 979px) { ... }


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }


/* Landscape phones and down */
@media (max-width: 480px) { ... }

通过向上述媒体查询添加特定的 css，您可以修改每个设备的布局。不要忘记将上述媒体查询放在您的 CSS 下方（为了安全起见）。

希望这可以解决您的问题。

于 2013-04-23T10:00:07.720 回答
0

您可以将它放在 50% 和 50% 中，并添加到大约一半内容大小的负边距。

jsfiddle.net/z3zpz/1/

于 2013-04-23T10:00:37.623 回答
0

如果内容的高度和宽度（.preloaderContent）已知，您也可以尝试这个。

html, body { height: 100%; }

#preloader {position: relative; background: #3399FF; width: 100%; height: 100%; }

.preloaderContent { position:absolute; height:100px; width:160px; top:50%; left:50%; margin-top:-50px; margin-left:-80px; }
于 2013-04-23T12:03:56.287 回答
0

试试这个

* { margin: 0; padding: 0; }

html, body { height: 100%; }

body { position: relative; background: #3399FF; }

#preloader { display: table; width: 100%; height: 100%; }

.preloaderContent { display: table-cell; vertical-align: middle; text-align: center; }

.preloaderContent img { display : block; margin: 0 auto; }

#loadLabel { padding-bottom: 10px; font-size: 30px; font-weight: 300; font-family: 'Segoe UI', Helvetica, Arial, 'Sans-Serif'; color: #FFFFFF; }
于 2013-04-23T11:56:47.510 回答