0

我无法在页面中心对齐隐藏的 div。

如果我将它们定位到 relative ，当我从一页移动到另一页时，滚动会增加（即 div 未与页面中心垂直对齐）

我应该将所有三个 div 放在一个容器 div 中吗？

请帮忙！！！

提前谢谢了..

<body>
    <div id ="page1" class="page" style=""visibility:visible>
        content
        <!-- also contains a button that hides this div and makes the
            next div visible -->
    </div>
    <div id="page2" class="page">
        content
        <!-- also contains two buttons for back and next div -->
    </div>
    <div id ="page3" class="page">
        content
        <!-- contains two buttons for back and submit -->
    </div>
</body>

我使用的 CSS 是：

.page {
    position: absolute;
    visibility:hidden;
}

我使用的javascript是：

<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}

function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
4

3 回答 3

0

这就是我将您的 div 与当前设置的 DEMO 居中的方式http://jsfiddle.net/kevinPHPkevin/g8r7Z/

#page1 {
    position:absolute;
    top:50%;
    right:0;
    left:0;
    background:#ccc;
    width:200px;
    margin:-50px auto 0 auto;
}
于 2013-05-18T16:54:44.780 回答
0

使用绝对定位使元素居中。高度和宽度不会影响结果。

.center-align{
 position:absolute;
 top: 0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 width: /* works with any width */;
 height: /* works with any height */;
 /* any other style wont effect it */

}

即使窗口调整大小，中心对齐仍然有效

于 2013-05-18T16:56:29.880 回答
-1

如果要以绝对位置居中，请使用以下命令：

.page {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    margin: -25% 0 0 -25%; /* should be -50% of width/height. */
}

当然你应该改变width和height你的愿望。正如评论所说：margin-top应该height * -0.5和margin-left应该是width * -0.5。

这是一个演示。

于 2013-05-18T16:43:41.273 回答