0

画面全体を占有し、Loading...という単語を表示するdivを取得しようとしていました。テキストを中央に水平方向と垂直方向に配置したかった.

なんとか水平に揃えることができましたが、テキストは画面の中央ではなく上部にあります。

コードは次のとおりです。

<div id="loadingdiv" class="screenMask"><p>Loading . . .</p></div>

div.screenMask 
{ 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%;
    overflow-y: auto;
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70);
    text-align: center;
    font-size: 28px;
}

div.screenMask p
{
border: 1px solid red;
    color: white;
    display: inline;
    z-index: 1001;
vertical-align: middle;
}

ここにjsFiddleがあります：

http://jsfiddle.net/azEaq/

垂直方向の中間位置にテキストを取得する方法を知っている人はいますか?

垂直方向の配置が機能すると思ったが、機能しない

4

4 に答える 4

1

div.screenMask p を...に変更します

div.screenMask p
{
border: 1px solid red;
position:absolute;
top:50%;
color: white;
display: inline;
z-index: 1001;
}​

次に、数ピクセル上に移動する場合は、負の margin-top を追加します。

更新 赤い境界線が必要ない場合 (トラブルシューティング用の場合)、これを使用してください...

div.screenMask 
{ 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%;
overflow-y: auto;
z-index: 1000; 
background-color: #000000; 
opacity: 0.7; 
filter: alpha(opacity=70);
text-align: center;
font-size: 28px;
}

div.screenMask p
{
border: 1px solid red;
color: white;
position:absolute;
height:60px;
width:100%;
text-align:center;
top:50%;
margin:-30px 0 0 0px;
}​
于 2012-07-06T03:25:42.783 に答える
0

に、およびにに変更しdisplayます。テキストの周囲に境界線が必要な場合は、テキストの周囲に境界線を追加し、その境界線を指定します：http: //jsfiddle.net/azEaq/11/tabledivtable-cellpspan

これはすべて完全に有効なCSSであり、ここではテーブルを使用していません（悪い習慣ですよね？）-表示をテーブルを模倣するように変更しているだけです。この手法は、提示した場合のように、中央に配置するブロックに事前定義された高さがない場合に適しています。

于 2012-07-06T03:39:18.267 に答える
0

これは機能します。クラスに追加するだけtop: 50%;で、ここで更新を確認できますhttp://jsfiddle.net/azEaq/5/position: absolute;div.screenMask pcss

CSSマークアップは次のようになります。

div.screenMask p
{
    border: 1px solid red;
    color: white;
    display: inline;
    z-index: 1001;
    top: 50%;
    position: absolute;
}​
于 2012-07-06T03:27:44.827 に答える
0

％ポジショニングを使用してから、負のマージンを使用することが1つの解決策です。この方法を使用すると、ウィンドウ/フレームのサイズ変更時にレイアウトが崩れないため、はるかに優れたアプローチです。

  div.screenMask p
    {
        border: 1px solid red;
        color: white;
        display: inline;
        z-index: 1001;
        position:absolute;
        height:30px;
        top:50%;
        margin:-15px 0 0 0px;
        vertical-align: middle;
    }

http://jsfiddle.net/azEaq/9/を見て、フレームのサイズを変更して、どのように機能するかを確認してください。

于 2012-07-06T03:28:25.947 に答える