0

非表示の div をページの中央に揃えることができません。

それらを relative に配置すると、あるページから別のページに移動するとスクロールが増加します（つまり、divがページの中央に垂直に配置されていません）

3 つの div すべてを 1 つのコンテナー 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

This is how I would center your div with the current set up 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 a element using absolute positioning. height and width won't affect the results.

.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 */

}

the center alignment holds even when the window resizes

于 2013-05-18T16:56:29.880 に答える