jQuery Mobile 中的中心控制组 [重复]答案

【问题标题】：Center control group in jQuery Mobile [duplicate]jQuery Mobile 中的中心控制组 [重复]
【发布时间】：2012-07-14 05:37:53
【问题描述】：

我在 jQuery Mobile 中有一个控制组，它是页脚的一部分：

<div data-role="controlgroup" data-type="horizontal">
  <a data-role="button" data-icon="toomanynotes-back" data-iconpos="notext"></a>
  <a data-role="button" data-icon="toomanynotes-play" data-iconpos="notext"></a>
  <a data-role="button" data-icon="toomanynotes-next" data-iconpos="notext"></a>
</div>

它看起来不错，但它总是在页脚的最左边。我找到了this 论坛帖子，但它对我不起作用。如何将对照组（水平）置于页脚的中心？

【问题讨论】：

JQM 1.1.1 的相同问题和解决方案：stackoverflow.com/questions/11503603/…

标签： javascript jquery html jquery-mobile footer

【解决方案1】：

在 jQuery Mobile 1.3.1 中，只需将这段代码放在你的 CSS 上：

.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
    text-align: center;
}

.ui-field-contain .ui-controlgroup-controls {
    width: auto;
}

【讨论】：

这看起来很有趣。我不再从事该项目，但我可能会尝试一下。

【解决方案2】：

这似乎在 jqm 1.1.1 中发生了变化。文本对齐：居中；有效，但现在不行了。

【讨论】：

【解决方案3】：

事实证明，其他一些 CSS 属性也起作用了：

#playdiv {
    font-size:1.0em;
    margin: 0 auto;
    width:100%;
    text-align: center;
    position:relative;
    left:50%
}

【讨论】：

很好，它对你有用，b/c 似乎不是正确的方法。 "left:50%" 将 div 的左边缘对齐在屏幕的中心，不会将 div 水平居中。 “左”的硬编码值也不起作用，如果您调整浏览器大小，控制组看起来不再居中对齐。
@SamikR：感谢您提供的信息。我对JQ和JS没有太多经验，所以请告诉我是否有更好的解决方案。

【解决方案4】：

我在 1.2.0 中唯一要做的就是使用文本对齐：居中

【讨论】：

感谢您的回答，但这应该是一个评论。

【解决方案5】：

我浪费了大约两个小时试图通过修改 CSS 来使按钮居中。我强烈建议改用布局网格。

<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>     
</fieldset>

来源：http://demos.jquerymobile.com/1.3.0-rc.1/docs/content/content-grids.html

【讨论】：