Android 将一行放置在XDK的中心

Android 将一行放置在XDK的中心,android,html,css,intel-xdk,Android,Html,Css,Intel Xdk,我正在使用Intel XDK使用app designer构建一个应用程序。 我在一行中有一个登录屏幕信息(UID、PWD和登录按钮) 现在,我希望这一行显示在屏幕中心(水平和垂直),而不考虑屏幕大小 我是否必须使用不同大小的媒体查询来执行此操作,或者有其他方法不使用媒体查询来执行此操作 代码: <div class="upage background" id="mainpage"> <div class="upage-outer">

我正在使用Intel XDK使用app designer构建一个应用程序。 我在一行中有一个登录屏幕信息(UID、PWD和登录按钮)

现在,我希望这一行显示在屏幕中心(水平和垂直),而不考虑屏幕大小

我是否必须使用不同大小的媒体查询来执行此操作,或者有其他方法不使用媒体查询来执行此操作

代码:

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

登录

将您的行/列放在另一行/列中。然后,在外部列中,将其对齐设置为“中心垂直和水平”。并将外部行的最小高度更改为100%(或100vh)。您可以在App Designer中完成所有这些

应该这样做

克里斯