0

DOM 要素の配置に問題があります。

この HTML ( http://bluecodestudio.com/scripts/ ) では、javascript によってアニメーション化されたポップアップが表示されます。「Enter」ボタンを押した後、「Welcome」メッセージが中央に配置されるようにしたいと思います。

しかし、それは他の要素と「衝突」し、要素の上を「フロート/フロー」する方法が見つかりません。style.css を修正するための変更はありますか? ありがとう！

PS: スクリプトとスタイルシートの [リンク] には絶対パス ルートを使用します。これは、Nodejs モジュールを使用して、それを強制するか、少なくともそれを機能させる最も簡単な方法であるためです。

編集: CSS 直接リンク: http://bluecodestudio.com/scripts/style.css

4

4 に答える 4

2

白い div aposition: relative; を指定してから、welcome p に次の css を指定します。

position: absolute;
text-align: center;
line-height: #px; // same as the white div

私はそれがトリックを行うべきだと思います

編集：

以前は深さを調べていませんでした。クロムインスペクターで試したところ、cssを次のように置き換える必要があります。

#welcomContent {
position: absolute;
padding: 88px 0;
text-align: center;
height: 200px;
width: 400px;
}
于 2012-08-02T19:11:36.293 に答える
1

あなたはこれを行うことができます：

 #welcomeContent
 {
       width: 100%;
       height: 100%;
       z-index: 1; /*For overlapping divs*/
       opacity: 0; /*Not visible on load*/
 }

 #welcomeMessage
 {
      width: 100%;
      text-align: center;
      vertical-align:middle;
  }

理論的には、これはメッセージを親 div の中央に配置する必要があります。これはdivとオーバーラップするため、z-indexが必要です

于 2012-08-02T19:23:58.167 に答える
0

わかりましたので、ここに疑似jQueryソリューションがあります：

var welcome = $(welcome);
var popupMsg = $(popupMsg);
var popup = $(popup);
var enter = $(enterButton);

enter.click(function () {
    var pOff = popup.offset();
    var newLeft = pOff.Left + ((popup.width() - welcome.width()) / 2);
    var newTop = pOff.Top + ((popup.height() - welcome.height()) / 2);

    welcome.css({ left: newLeft, top: newTop });
    popupMsg.fadeOut();
    welcome.fadeIn();
});

ご不明な点がございましたら、お知らせください。

 

これは疑似的なものであることを忘れないでください。入力する必要があります。

于 2012-08-02T19:15:22.297 に答える
0

まず第一に、#loginContentdiv を display: none で非表示にすると、フェードアウトが完了すると、レイアウトを決定するときに考慮されなくなります。

次に、ようこそテキストを水平方向に中央に配置するfloat: leftには、#welcomeContentdiv を削除します。

テキストを垂直方向にも中央揃えにする場合は、さまざまな方法があります。その一部をhttp://www.vanseodesign.com/css/vertical-centering/で説明しています。Welcome! という 1 つの単語だけを使用する場合は、line-height メソッドが最も簡単な方法です。

于 2012-08-02T19:22:05.843 に答える