jQuery移动元素不对齐div中的中心

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的移动提供了一种用于输入施加一个CSS类到包装纸DOM元素的数据的包装器级属性JQM创建当初始化它的小部件。因此，你可以申请一个定心类与此属性

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

我也通过均衡左为中心的复选框中的文本和正确的填充和应用文本对齐。

工作DEMO