我正在开发一个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>
答案 0 :(得分: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