Question

我正在为Android和iphone创建一个HTML5网络应用。

为了简单起见，我有一个“主页”页面和一个“登录”页面。

这是我的标记：

<div class="container-fluid  pagination-centered" style="width: 100%; height: 100%; margin: auto; background-color: yellow;">
    <div class="navbar navbar-inverse navbar-fixed-top" id="Header" style="min-height: 37px;">
        <div class="col-xs-12">
            <!--Header stuff goes here-->
        </div>
    </div>
    <div class="row" id="Contents" style="height: 100%;">
        <div class="col-xs-12" style="vertical-align: middle;">
            <div id="PIN" style="display: none;height: auto;">
            </div>
            <div id="Manager" style="display: none;height: auto;">
            </div>
            <div id="LogIn" style="background-color: white;height: auto;">
            </div>
            <div id="Live" style="display: none;height: auto;">
            </div>
        </div>
    </div>
    <div class="navbar navbar-inverse my-footer navbar-fixed-bottom" style="height: 22px; background-color: black;">
        <div class="container-fluid" style="height: 22px">
            <div id="rowFooter" style="width: 100%">
               <!--footer stuff goes here-->
            </div>
        </div>
    </div>
</div>

我的LogIn.html页面的标记是：

<html>
<body>

    <div class="row">
        <div id="lblSubHeader" class="col-xs-12" style="color: white;padding-left:5px; float: left; font-size:large;text-align:left;
font-weight: 600; width: 100%; overflow: hidden">Register</div>
    </div>
    <div class="row" id="row1" style="margin-top:15px;">
        <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px; font-weight: bold;
            margin-left: 5px; width: 100%; font-size: smaller;">
            Email address
        </div>
    </div>
    <div class="row" id="Div1">
        <div class="col-xs-12">
            <input id="txtUsername" type="text" class="form-control input-md" style="width: 100%;margin-bottom:3px; " />
        </div>
    </div>
    <div class="row" id="Div2">
        <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px;  margin-top:3px; font-weight: bold;
            margin-left: 5px; width: 100%; font-size: smaller;">
            Password
        </div>
    </div>
    <div class="row" id="Div3">
        <div class="col-xs-12">
            <input id="txtPassword" type="password" class="form-control input-md" style="width: 100%" />
        </div>
    </div>
    <div class="row" id="Div4">
        <div style="left: 0px;  float: right;padding-top:45px;" class="col-xs-12">
            <a href="#" id="btnOKLogIn" class="button"><img src="../Common/Images/Buttons/GO.png" /></a>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../Mobile/Scripts/LogIn.js"> 
</script>

我想将页面居中放在容器DIV的中间。

使用上面的标记，div'page'始终垂直位于页面顶部。

我已经浏览了几个在Google上找到的例子，但似乎都没有。我使用的最新版本是上面的内容。

Answer 1

如果我理解正确，您希望将内容垂直居中。这是一个模拟可能会帮助你的方式：

http://jsfiddle.net/srs1em1s/

及相关代码：

HTML：

<div class="page">This should be vertically centered on your screen</div>

的CSS：

.page {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  display:table;
}

更新了小提琴：http://jsfiddle.net/qe9gvukq/2/

使用Bootstrap使用DIV容器居中网格

1 个答案: