jquery mobile center 在页脚中内联两个按钮

Question

我希望能够在 jquery Mobile 中对齐页脚中心的两个按钮。我已将我的代码放在下面的 jsfiddle 中:-

Fiddle

我该怎么做，我已经差不多了。

    <div data-role="page" data-theme="b" id="option-page"> 
        <div data-role="content"> 

        </div>
        <div id="homeFooter" class="controlsFooter" data-role="footer" data-position="fixed" data-theme="c">
                <div class="center-wrapper" style="float:left; margin-right:10px;">
                  <a href="#filterPage" data-role="button" data-transition="slide" data-inline="true" data-theme="a" data-icon="check" data-mini="true">Filter</a>
                </div>

                <div class="center-wrapper" style="float:left;">
                        <form name="actions" action="" method="post">
                                <select name="select-action" id="select-action" data-inline="true" data-theme="a" 
                                data-icon="home" tabindex="-1" data-inline="true" data-corners="true" data-iconshadow="true" data-shadow="false">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                </select>
                        </form>
                </div><!-- end of center wrap -->
            </div><!-- /footer -->
    </div>

• 还有如何将按钮居中并将它们内联对齐。例如 Facebook 应用程序标题、图标按钮、左侧、中间 3 个和右侧 1 个？

谢谢

Answer 1

如果你有多个元素，如果它们是内联或内联 block 元素，你只能将它们彼此居中对齐，否则你将需要计算出你需要居中的元素的总宽度，重击它们在该宽度的 div 中，然后将 margin auto 放在该 div 上

http://jsfiddle.net/rULKH/101/

在您的示例中，我将您的按钮包裹在一个 div 中以将它们居中:

        <div style="width:150px; margin:auto;">
        <div class="center-wrapper" style="float:left; margin-right:10px;">
          <a href="#filterPage" data-role="button" data-transition="slide" data-inline="true" data-theme="a" data-icon="check" data-mini="true">Filter</a>
        </div>

        <div class="center-wrapper" style="float:left;">
                <form name="actions" action="" method="post">
                        <select name="select-action" id="select-action" data-inline="true" data-theme="a" 
                        data-icon="home" tabindex="-1" data-inline="true" data-corners="true" data-iconshadow="true" data-shadow="false">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                        </select>
                </form>
        </div><!-- end of center wrap -->
</div>