1

私が欲しいのは、ページの読み込み中に「読み込み中...」を単純なテキストとして表示し、テキストを水平方向と垂直方向の両方の中央に配置することです。私は多くの例を見て、今はうまくいくように見えるある種の解決策を持っていますが、効果が常に同じであり、私のコードが優れたCSSにさえ近いかどうか疑問があります。<body>私が持っているのはindex.phpページで、タグの直後にこれがあります。

<body>

        <div id="loading-standard-user">
            <p id="loading-standard-user-text">Loading...</p>
        </div>

後で、ページが読み込まれるときにテキストを非表示にする機能がありますが、気になるのはタグ<div>と<p>タグのスタイルです。これが私のCSSです：

#loading-standard-user {
  width: 100%;
}

#loading-standard-user-text {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-family: arial;
  top: 50%;
  margin-top: -40px;
}

私はいくつかの不要なコードを持っていると確信していますが、同時に何かを見逃しています。私が疑問に思うことの1つは、font-size: 40px後でコードを垂直方向に中央揃えにするmargin-top場合は、値が等しいことを意味する必要があるということです。フォントの半分のサイズになりますが、フォントのサイズと同じ場合、視覚的には中央にmargin-top表示されます。とにかく、スタイリングについての考えや私の間違いはどこにあり、どうすればそれを正しく行うことができますか？

ありがとう

レロン

4

2 に答える 2

2

あなたのCSSコードはあなたが望むことをほぼ正確に実行しているようです。私が見つけることができるそれに関する唯一の問題は、あなたのマージントップが高さの-50％でなければならないということです。divの高さは40px（フォントサイズ）なので、正確に中央に配置するには、margin-topを-20pxにする必要があります。

詳細：top: 50%テキストの上部をコンテナの途中に設定します。次にmargin-top: -20px、20px上に移動して中央に配置します。

編集：@mgibsonbrによって提案されているように、を使用したい場合はem、次のCSSを試してください。

#loading-standard-user {
  position: fixed;
  width: 100%;
  height:40px;
  top: 50%;
  margin-top: -2em;

}

#loading-standard-user-text {
  width: 100%;
  text-align: center;
  font-size: 4em;
  font-family: arial; 
}
于 2012-05-22T08:20:42.013 に答える
1

不必要に#loading-standard-user思えますが、例は2番目のルールだけで（少なくともFirefoxとChromeでは）正常に機能しました。（内側のdivで使用しているという事実position: fixedにより、外側を配置する場所は無関係になります）

topandの問題については、margin-top中央に配置されているように見えるかもしれませんが、実際には次のようになっているわけではありません。

ここに画像の説明を入力してください

emまた、後でテキストのサイズを変更する必要がある場合は、サイズを設定する代わりにを使用することをお勧めしpxます。これにより、ユーザーがブラウザのテキストのサイズを変更したときに自動的に調整されます。1 emは大文字の「M」1 exの高さ、は小文字の「x」の高さです。

（残念ながら、実際には、問題なく動作している間は動作させることができませんでしたem。px何かが足りないのではないでしょうか？）

于 2012-05-22T08:32:06.343 に答える