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 类应用于 jQM 在初始化其小部件时创建的包装器 DOM 元素。因此，您可以应用具有此属性的居中类

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