2

ユーザーがどこかをクリックできないように、自分のサイトにオーバーレイを作成したいと考えています。時々とても便利です。オーバーレイの途中に、「お待ちください..」や「読み込み中...」などのメッセージを配置したいと考えています。

画面全体をカバーするを作成しdiv、その中にメッセージを含むスパンを作成しました。span内部を水平方向に中央div揃えすることはできましたが、垂直方向の配置に苦労しています。また、メッセージは垂直方向の中央に配置する必要があります。

これまでの私のコードは次のとおりです。

HTML:

<div id="overlay">
    <span>Please wait...</span>
</div>

CSS:

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
}

ここにjsfiddleがあります。

では、メッセージを垂直方向に中央揃えにしてスパンを取得するにはどうすればよいでしょうか?

4

2 に答える 2

0

それに加えて、 Center オブジェクトの高さと幅が大きい場合、ちょうど同じ半分の負のマージンを与えることができます。

  #overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #000;enter code here
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    height:100px;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    display:block;
}
于 2013-08-30T07:39:38.550 に答える