表格单元格包装时带有css的中心表

Question

我试图将两个“细胞”集中在一起。我已经设法用“内联块”和“表格列”来完成它，但是当区域太窄并且单元格的内容包装时会出现问题。使用内联块，宽度是容器的宽度，它不会包装，直到它为时已晚。对于表格列，它包裹得很好，但它不再居中。

当li很窄时，如何让表单居中？

链接：http://jsfiddle.net/V4J8y/

CSS：

/*horizontal the jquery mobile 1.4.2 way removes icons, so hack it in*/
.horizontal-with-icons .ui-checkbox {
    float: left;
}

HTML：

<ul>
    <li>
        <form style="display: table; margin: 0px auto;">
            <!--TODO: center when narrow-->
            <div style="vertical-align: middle; display: table-cell;">Bedrooms:</div>
            <fieldset data-role="controlgroup" class="horizontal-with-icons" style="vertical-align: middle;">
                <label>
                    <input id="bedroom-1" type="checkbox" />1</label>
                <label>
                    <input id="bedroom-2" type="checkbox" />2</label>
                <label>
                    <input id="bedroom-3" type="checkbox" />3</label>
                <label>
                    <input id="bedroom-4" type="checkbox" />4</label>
            </fieldset>
        </form>
    </li>
</ul>