jQuery移动元素未在div中对齐中心答案

【问题标题】：jQuery mobile elements not aligned center in divjQuery移动元素未在div中对齐中心
【发布时间】：2015-05-19 15:12:04
【问题描述】：

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

我有一个将 css 设置为 text-align: center 的包装 div。问题是文本输入和复选框元素没有对齐到登录 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>

【问题讨论】：

在我看来居中：jsfiddle.net/9wtqfptc

标签： jquery css jquery-mobile

【解决方案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;
}

我还通过均衡左右填充和应用 text-align 使复选框内的文本居中。

工作DEMO

【讨论】：