Question

采取婴儿步骤进行网络开发。我的应用程序的加载程序屏幕与this Fiddle非常相似。

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

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

我一直在阅读许多相关的帖子和博客，但无论设备宽度如何，都无法让我的文字/图片保持居中。这可以通过调整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;
}

道歉，这有点乱。有人可以用我的方式指出错误吗？

Answer 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/

Answer 2

您需要添加一些响应式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下面（为了安全起见）。

希望这能解决您的问题。

Answer 3

你可以把它放在50％和50％之间，并加上大约一半内容大小的负余量。

jsfiddle.net/z3zpz/1 /

Answer 4

尝试这个

* { 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; }

Answer 5

如果已知内容的高度和宽度（.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; }

水平对齐img＆amp;文本？

5 个答案: