Jquery 文本对齐：居中不工作

我使用的是jquery mobile，具有以下html和css：

.ui-grid-a{
填充：0；
保证金：0；
边缘顶部：15px；
高度：380px；
}
.ui-block-a、.ui-block-b{
填充：0；
保证金：0；
身高：33.3%；
}
.ui-block-a、.ui-block-b a{
宽度：50%；
}
.ui-bar-a，ui-bar{
保证金：0自动；
填充：0；
身高：90%；
宽度：90%；
最大宽度：500px；
文本对齐：居中；
/*梯度设置*/
背景：#3DC8F3！重要；
/*边界设置*/
边框：0px纯白；
边界半径：0px；
盒影：0px 0px 0px#000；
显示：表格；
}
.菜单元素{
保证金：0；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中！重要；
}
.菜单元素a{
文字装饰：无；
}
.菜单元素.菜单文本{
边缘顶部：5px；
字号：0.9em；
颜色：#FFF；
文本对齐：居中；
}
.ui栏、.ui正文{
位置：相对位置；
溢出：隐藏；
显示：块；
填充：0.9em 1em！重要；
明确：两者皆有；
文本对齐：居中！重要；
}
这是为该块呈现的完整css

家

无需使用

-moz

前缀。所有浏览器都支持它。 必须为元素提供

宽度

，才能使

文本对齐

正常工作

演示：

---

文档：

仅使用

文本对齐：居中它将在所有浏览器中工作。。此外，您还可以使用
margin:0 auto在中心对齐

.ui-bar, .ui-body {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0.9em 1em !important;
    clear: both;
    text-align: center;
    margin:0 auto;
}

修订版：

在看到您的预期输出后，我发现这是解决方案之一

.ui-grid-a {
     padding: 0;
     margin: 0;
     margin-top: 15px;
     height: 380px;
 }
 .ui-block-a, .ui-block-b {
     padding: 0;
     margin: 0 auto;
     height: 33.3%;
 }
 .ui-block-a *, .ui-block-b * {
     margin: 0 auto;
     text-align: center;
 }
 .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 auto;    
     text-align: center !important;
 }
 .menu-elem a {
     text-decoration: none;
      margin: 0 auto;    
     text-align: center !important;
 }
 .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;
 }

希望这对你有帮助
 我看到的第一个问题是在a中使用div，这是不允许的，因为div是块元素，链接是内联的，所以必须将这些div更改为span

<div class="ui-block-a" >
    <div class="ui-bar ui-bar-a">
        <div class="menu-elem">
            <a href="#">
                <span class="menu-img">
                    <img src="images/t.png" style="width: 50px;">
                </span>
                <span class="menu-text">
                    test 
                </span>
            </a> 
        </div>
    </div>
</div>

.ui-bar, .ui-body {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0.9em 1em !important;
    clear: both;
    text-align: center;
}

Fiddle:
正如braks指出的，您的标记确实存在一些问题，CSS可能需要稍微整理一下，但是，您可以通过删除
display:block从
.ui栏、.ui正文
。这是因为您正在使用表格居中技术来居中文本和图像，将
.ui bar
更改为
display:block停止此技术的工作


.ui-grid-a{
填充：0；
保证金：0；
边缘顶部：15px；
高度：380px；
}
.ui-block-a，
.ui-block-b{
填充：0；
保证金：0；
身高：33.3%；
}
.ui-block-a，
.ui-block-b a{
宽度：50%；
}
.ui-bar-a，
用户界面栏{
保证金：0自动；
填充：0；
身高：90%；
宽度：90%；
最大宽度：500px；
文本对齐：居中；
/*梯度设置*/
背景：#3DC8F3！重要；
/*边界设置*/
边框：0px纯白；
边界半径：0px；
盒影：0px 0px 0px#000；
显示：表格；
}
.菜单元素{
保证金：0；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中！重要；
}
.菜单元素a{
文字装饰：无；
}
.菜单元素.菜单文本{
边缘顶部：5px；
字号：0.9em；
颜色：#FFF；
文本对齐：居中；
}
.ui栏，
.ui主体{
位置：相对位置；
溢出：隐藏；
/*显示：阻止；删除此*/
填充：0.9em 1em！重要；
明确：两者皆有；
文本对齐：居中！重要；
}

家
在标准中，哪里说
文本对齐
属性需要
宽度
？@urbz他们没有明确说明，但是如果你看他们的示例，你会发现他们在每个示例中都使用了
宽度。是的，但这并不意味着提供了css属性
text align
的元素需要
width
，即使它有助于解决TS问题。请提供重现该问题的代码。您提供的代码（使用
text align:center；
）工作正常，因此可能有其他样式导致此问题。还值得注意的是，
div
元素在
a
元素中无效。请查找完整的代码片段。我已经编辑了代码谢谢，但这仍然不够，请使用
text align:center使示例中的内容居中。您可能遗漏了一些导致问题的重要CSS。我使用的是jquery mobile和CSS代码，我在main.CSS中给出了CSS，这部分正在使用。剩下的所有内容都是从jquery mobileThanks中呈现出来的，现在我可以重现这个问题了。我已经发布了一个答案，希望能够解决这个问题并解释出问题所在。我已经尝试用span替换它，并添加了显示块，但文本仍然不对齐。请查找上面完整的css和html代码。您能将我们作为图像表示显示为预期输出和渲染输出吗？这对我来说很好。。这就是为什么要求图像表示我已经添加了上面的图像。请检查
.ui-bar span {
   display: block;
}