【发布时间】:2015-07-16 07:44:18
【问题描述】:
我正在使用 jquery mobile 并且有以下 html 和 css:
.ui-grid-a {
padding: 0;
margin: 0;
margin-top: 15px;
height: 380px;
}
.ui-block-a, .ui-block-b {
padding: 0;
margin: 0;
height: 33.3%;
}
.ui-block-a a, .ui-block-b a {
width: 50%;
}
.ui-bar-a, ui-bar {
margin: 0 auto;
padding: 0;
height: 90%;
width: 90%;
max-width: 500px;
text-align: center;
/* Gradient set-up */
background: #3DC8F3 !important;
/* Border set-up */
border: 0px solid white;
border-radius: 0px;
box-shadow: 0px 0px 0px #000;
display: table;
}
.menu-elem {
margin: 0;
display: table-cell;
vertical-align: middle;
text-align: center !important;
}
.menu-elem a {
text-decoration: none;
}
.menu-elem .menu-text {
margin-top: 5px;
font-size: 0.9em;
color: #FFF;
text-align:center;
}
.ui-bar, .ui-body {
position: relative;
overflow: hidden;
display: block;
padding: 0.9em 1em !important;
clear: both;
text-align: center !important;
}
This is the full css that is being rendered for this block
<div data-role="page" id="AppBody" style="background: #00AEEF">
<div data-role="header"style="background:#0E74BC;color:white;">
<h1 class="Home">Home</h1>
<a href="#" data-role="button"data-direction="reverse" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" data-transition="slide"
data-iconpos="notext" class="ui-btn-right"><img src="images/logout.png" style="width: 25px;"></a>
</div>
<div role="main" class="ui-content">
<div class="ui-grid-a"> <!-- menu-container -->
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
<div class="menu-elem">
<a href="#">
<div class="menu-img">
<img src="images/t.png" style="width: 50px;">
</div>
<div class="menu-text">test</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
text-align: -moz-center; 在 Mozilla 中可以正常工作,但在其他浏览器中则不行。如果我使用text-align: center;,那么它在任何浏览器中都不起作用。
【问题讨论】:
-
请提供重现问题的代码。您提供的代码(使用
text-align: center;)工作正常,因此很可能有其他样式导致问题。 jsfiddle.net/n42bna5o。另外值得注意的是div元素在a元素中无效。 -
请找到完整的代码sn-p。我已经编辑了代码
-
谢谢,但这还不够,使用
text-align: center;将您的示例中的内容居中。您可能遗漏了一些导致问题的重要 CSS。 -
我正在使用 jquery mobile 和我在我的 main.css 中给出的 css 代码,这部分正在使用。剩下的都是从 jquery mobile 呈现的
-
谢谢,我现在可以重现该问题。我已经发布了一个答案,希望能解决这个问题并解释出了什么问题。
标签: jquery html css jquery-mobile