Question

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

我有一个包装器div，其css设置为text-align：center。问题是文本输入和复选框元素没有对齐到登录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为输入提供了一个数据包装类属性，它将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

jQuery移动元素没有在div中居中

1 个答案: