如何在视口中居中一组 JQuery Mobile 单选按钮？答案

【问题标题】：How do I center a set of JQuery Mobile radio buttons in the viewport?如何在视口中居中一组 JQuery Mobile 单选按钮？
【发布时间】：2012-06-09 10:56:33
【问题描述】：

我正在 PhoneGap (Cordova) 之上使用 JQuery Mobile 制作应用程序。我使用 Codiqa 为我的 UI 设计了一个线框。到目前为止看起来还不错，但是我将用来更改视图的单选按钮组没有居中 - 在 WVGA800 大小的 webkit 浏览器上，它向左偏移了大约 25 像素。当缩放为平板电脑形状时，该组离视口中心越来越远。

这是我的项目的 jsFiddle 链接，问题未解决 - http://jsfiddle.net/jaspermogg/sahXy/1/

这是我修复的项目的 jsFiddle 链接 - http://jsfiddle.net/jaspermogg/NvMsK

我想出了一个使用 JQuery 的解决方案，但我缺乏经验，不知道要触发哪个事件。

当我在 Webkit 中加载 UI 时，它会呈现 UI 前脚本，然后在 $(window).load 上运行。

问题：

我应该寻找什么事件，你能告诉我如何实现吗？
我的脚本是否在正确的位置 - 它应该在页面内部、按原样还是在页面外部？还是在head 中？
用 JQ 做这个感觉真的很愚蠢 - 肯定有办法用 CSS 做这个吗？

提前感谢您提供的任何帮助！干杯！

【问题讨论】：

我已经修复了盒子模型的中心对齐。虽然这仍然不是优雅的解决方案（我对 css 不是很好）jsfiddle.net/dhavaln/sahXy/3
这篇文章总结了至少所需的解决方案stackoverflow.com/questions/4329866/…
@dhaval 谢谢，太好了。不过，我真正想做的是找到在显示之前需要将 div 设置为的宽度。您的解决方案少了几个像素，因为您给 box-center 一个静态宽度。当然在不同的设备上所需的像素宽度会有所不同，这会破坏页面吗？
@dhaval 实际上，我想这就是我应该做的 - 在页面加载时让它们不可见，找到所需的宽度，设置它并使其可见。先生，您是个天才；-)

标签： css jquery-mobile cordova radio-button centering

【解决方案1】：

我想我在上面的 cmets 中回答了我自己的问题，所以通过接受我的回答来正式化它。

我最后做的是——

(1) 在 CSS 中将包含单选按钮的 div 设置为 visibility: hidden。

(2) 找出每个单选按钮的宽度并将它们相加。

(3) 设置单选按钮所在的div的宽度为总宽度。

(4) 将可见性属性的更改链接到 (3)。

CSS 必须这样设置 -

#viewselector{
    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

做(1)到(4)的代码如下-

$(document).ready(function(){

    var idealwidth = 0

    $(".ui-radio").each(function(){
        idealwidth = idealwidth + $(this).width();
    });

    $("#viewselector").width(idealwidth).css('visibility','visible');

});

希望这对某人有所帮助！

【讨论】：