Question

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

在此HTML（http://bluecodestudio.com/scripts/）中，弹出一个弹出窗口，感谢javascript。按下“Enter”按钮后，我希望“欢迎”消息放在中心。

但是它与其他元素“发生碰撞”，我无法找到让它在元素上“浮动/流动”的方法。我的style.css有什么变化来修复它吗？谢谢！

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

修改：CSS直接链接：http://bluecodestudio.com/scripts/style.css

Answer 1

给你的白色div position: relative; 然后欢迎你的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;
}

Answer 2

你可以这样做：

 #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，因为这会重叠divs

Answer 3

好的，这是一个伪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();
});

如果您有任何疑问，请与我们联系。

请记住，这只是伪 - 你必须填写它。

Answer 4

首先，当你完成淡出时，你会想要隐藏#loginContent div和display：none，然后在确定布局时不再考虑它。

然后将欢迎文本水平居中，将float: left除#welcomeContent div。

如果您还希望垂直居中，有多种方法可以执行此操作，其中一些方法如下所述：http://www.vanseodesign.com/css/vertical-centering/。如果您只使用单词Welcome！，则行高可能是最简单的方法。

DOM对象超过其他DOM对象

4 个答案: