0

我在放置 DOM 元素时遇到问题。

在这个 HTML ( http://bluecodestudio.com/scripts/ ) 中，出现了一个弹出窗口，感谢 javascript 的动画。按“Enter”按钮后，我希望将“欢迎”消息放在中心。

但它与其他元素“碰撞”，我找不到让它在元素上“浮动/流动”的方法。对我的 style.css 进行任何更改以修复它吗？谢谢！

PS：我对脚本和样式表的 [链接] 使用绝对路径路由，因为我使用了一个 Nodejs 模块，这种模块“迫使”我这样做，或者至少是使其工作的最简单方法。

编辑：CSS 直接链接：http ://bluecodestudio.com/scripts/style.css

4

4 回答 4

2

给你的白色 div aposition: relative; 然后给你的欢迎 p 以下css：

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

我认为这应该可以解决问题

编辑：

我以前没有深入研究。我刚刚在 chrome 检查器中尝试过，你应该用这个替换你的 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 的中心。你需要一个 z-index 因为这会重叠 div

于 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

首先，当它完成淡出时，您将要#loginContent使用 display: none 隐藏 div，然后在确定布局时将不再考虑它。

然后将欢迎文本水平居中float: left取下#welcomeContentdiv。

如果您还想将文本垂直居中，有多种方法可以做到这一点，其中一些在此处进行了描述：http ://www.vanseodesign.com/css/vertical-centering/ 。如果您只需要一个单词 Welcome!，那么 line-height 方法可能是最简单的。

于 2012-08-02T19:22:05.843 回答