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

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 に答える
0

50% と 50% に入れて、コンテンツ サイズの約半分のこの負のマージンに追加できます。

jsfiddle.net/z3zpz/1/

于 2013-04-23T10:00:37.623 に答える