如何在一個jQuery的移動頁面上垂直放置一個DIV

我想將practiceType div放在practice div塊的中間。這是一個jQuery的移動頁面。這是我的代碼。如何在一個jQuery的移動頁面上垂直放置一個DIV

<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>

來源

2016-10-07 Daniel Manford Junior

的可能的複製[如何垂直居中一個div所有的瀏覽器？（http://stackoverflow.com /問題/ 396145 /如何到垂直中心-A-DIV參加的所有的瀏覽器） –

如何垂直中心的元素

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

然後，父格設置爲

position: relative;

所以你的新代碼將是：

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

#practice { 
    position: relative; 
}

來源

2016-10-07 16:17:55

你可以使用flexbox來實現這一點。

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

 
.child { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
</div>

來源

2016-10-07 16:36:56

下面的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; 
}

來源

2016-10-07 16:41:45

如何在一個jQuery的移動頁面上垂直放置一個DIV

回答

相關問題