jQuery 移动元素未在 div 中居中对齐

Question

我正在开发 jquery 移动应用程序。

我有一个包装器 div css 设置为文本对齐：居中。问题是文本输入和复选框元素没有对齐到登录的中心 div。

我想我必须覆盖 jquery 手机 CSS 但我不知道如何。

CSS:

.login {
    width: 90%;
    text-align: center;
    height: 100%;
    margin: 0 auto; 
}

HTML:

<div data-role="page">
    <div class="login">
        <img id="logo" class="logoportrait" src="img/logo.png" alt="">
        <br><br>
        <!-- Login -->  
        <label for="u"> gtt Username:</label>
        <input type="text" name="u" id="u" value="">

        <label for="pw">Your Password:</label>
        <input type="password" name="pw" id="pw" value="">      

        <label for="save" class="ck">Save My Login Information?</label>
        <input type="checkbox" name="save" id="save" class="ck">
        <br>
        <button>LOGIN AND TRACK!</button>
    </div>
</div>

Answer 1

jQuery Mobile 为输入提供了一个 data-wrapper-class 属性，它将 CSS class 应用于 jQM 创建的包装器 DOM 元素初始化它的小部件。因此，您可以使用此属性

应用居中 class

HTML:

<div data-role="page">
    <div class="login">
        <img id="logo" class="logoportrait" src="img/logo.png" alt="" />
        <br />
        <br />
        <!-- Login -->
        <label for="u">gtt Username:</label>
        <input type="text" name="u" id="u" value="" data-wrapper-class="centerInput" />
        <label for="pw">Your Password:</label>
        <input type="password" name="pw" id="pw" value="" data-wrapper-class="centerInput" />
        <br />
        <label for="save" class="ck">Save My Login Information?</label>
        <input type="checkbox" name="save" id="save" class="ck" data-wrapper-class="centerInput" />
        <br />
        <input type="button" data-wrapper-class="centerInput" value="LOGIN AND TRACK!" />
    </div>
</div>

CSS:

.login {
    width: 90%;
    text-align: center;
    height: 100%;
    margin: 0 auto;
}
.centerInput {
    width: 60%;
    text-align: center;
    margin: 0 auto;
}
label.ck {
    padding-right: 2.5em;
    text-align: center !important;
}

我还通过均衡左右填充和应用文本对齐将复选框内的文本居中。

Working DEMO

jQuery 移动元素未在 div 中居中对齐

jQuery mobile elements not aligned center in div

css

jquery

jquery-mobile