Question

我想将practiceType div置于练习div块的中心。这是一个jquery移动页面。这是我的代码。

<body>
        <div data-role="page" id="practice" >
<!-- /header -->
    <div data-role="header" id="appheader">
        <h2 style="text-align:center;">XXX - Practice Test</h2>
    </div>
<!-- /content -->
    <div role="main" class="ui-content" id="practiceType" style="margin-top:25%;margin-bottom:25%;">
           <div data-role="main" class="ui-content" >
        <a href="#" class="ui-btn ui-corner-all">MATH PRACTICE TEST </a>
        <a href="#" class="ui-btn ui-corner-all">ELA PRATICE TEST</a>
            </div>
    </div>
<!-- /footer -->
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"  id="appfooter" >
        <h6>Comprehensive Learning Resources</h6>
    </div>
</div><!-- /page -->
    </body>
</html>

Answer 1

如何垂直居中元素

.element {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
}

然后，将父div设置为

position: relative;

所以你的新代码将是：

#practiceType {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
}

#practice {
    position: relative;
}

Answer 2

您可以使用flexbox来实现这一目标。

<item name="android:textColor">@color/menu_section_header</item>

.container {
  width: 500px;
  height: 200px;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background: red;
}

Answer 3

css下方将帮助您将div集中。

#outer{
 background-color: #000;
 float: left;
 height: 200px;
 width: 100%;
 }
#centerDiv{
 background-color: #fff;
 height: 150px;
 margin: auto;
 width: 70%;
}

检查此demo

尝试使用以下代码作为文本中心

#outerDiv{
 float: left;
 width: 100%;
 }
#outerDiv h2{
 text-align:center;
 }

如何在Jquery移动页面上垂直居中DIV

3 个答案: