在XDK中居中排名

我正在使用英特爾XDK與應用程序設計人員構建應用程序。我有一行內的登錄屏幕信息（UID，PWD和登錄按鈕）。在XDK中居中排名

現在我想讓這一行出現在屏幕中心（水平和垂直），而不考慮屏幕尺寸。

是否必須使用不同大小的媒體查詢來做到這一點，或者有沒有其他方式可以在不使用媒體查詢的情況下做到這一點？

代碼：

<div class="upage background" id="mainpage"> 
      <div class="upage-outer"> 
       <div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0"> 
        <h2></h2> 
        <div class="widget-container wrapping-col single-centered"></div> 
        <div class="widget-container content-area horiz-area wrapping-col left"></div> 
        <div class="widget-container content-area horiz-area wrapping-col right"></div> 
       </div> 
       <div class="upage-content content-area vertical-col" id="page_92_17"> 

        <div class="grid grid-pad urow uib_row_1 space" data-uib="layout/row" data-ver="0"> 
         <div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0"> 
          <div class="widget-container content-area vertical-col"> 

           <div class="table-thing widget uib_w_3 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1"> 
            <label class="narrow-control"></label> 
            <input class="wide-control form-control default" type="text" placeholder="Username"> 
           </div> 
           <div class="table-thing widget uib_w_4 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1"> 
            <label class="narrow-control"></label> 
            <input class="wide-control form-control default" type="password" placeholder="Password"> 
           </div> 
           <button class="btn widget uib_w_5 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1">Login<i class="glyphicon glyphicon-chevron-right button-icon-right" data-position="right"></i> 
           </button><span class="uib_shim"></span> 
          </div> 
         </div> 
         <span class="uib_shim"></span> 
        </div> 
       </div> 
       <div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0"> 
        <h2></h2> 
        <div class="widget-container wrapping-col single-centered"></div> 
        <div class="widget-container content-area horiz-area wrapping-col left"></div> 
        <div class="widget-container content-area horiz-area wrapping-col right"></div> 
       </div> 
      </div> 
     </div>

來源

2015-04-30 Priyabrata

把你的行/列的另一行/列內。然後，在外欄中，將其對齊方式設置爲「居中和居中」。並將外部行的最小高度更改爲100％（或100vh）。你可以在App Designer中完成所有這些。

這應該做到這一點。

Chris

來源

2015-05-06 20:58:08

在XDK中居中排名

回答

相關問題