Question

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

我怎么做到这一点，我几乎就在那里。

    <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

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

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>

jquery移动中心两个按钮内嵌在页脚

1 个答案: