Question

目前我正在为响应式设计编写代码。因此，代码中有几个元素设置为相对宽度或未知宽度。

在这种特殊情况下，我有一个section-element，用于寻呼机切换未知数量的页面。所以它的宽度是不确定的。

由于布局原因，寻呼机可以放置在父元素的水平中心，由相对宽度定义。

我知道如何以绝对宽度和相对宽度居中元素，但在这种情况下我有点无奈。我也在这里搜索并发现了一些帖子，但我找不到合适的解决方案。

你有什么想法吗？

代码：

<section class="pager">
    <ul>
        <li><a href=""><span>&laquo;<span> previous</span></span></a></li>
        <li><a href="" class="active"><span>1</span></a></li>
        <li><a href=""><span>2</span></a></li>
        <li><a href=""><span>3</span></a></li>
        <li><a href=""><span>4</span></a></li>
        <li><a href=""><span>5</span></a></li>
        <li><a href=""><span>6</span></a></li>
        <li><a href=""><span>7</span></a></li>
        <li><a href=""><span>8</span></a></li>
        <li><a href=""><span>9</span></a></li>
        <li>...</li>
        <li><a href=""><span>540</span></a></li>        
        <li><a href=""><span>541</span></a></li>
        <li><a href=""><span><span>next </span>&raquo;</span></a></li>
    </ul>
</section>

提前致谢。

Answer 1

你试过这个吗？

.pager{display:block;width:100%;min-width:200px;margin:0 auto;text-align:center}

min-width值是一个示例，您可以调整每个分辨率的最小宽度

Answer 2

看看这个小提琴，看看这是否有帮助：

http://jsfiddle.net/qQEQ6/

如何将宽度未知的元素居中？

2 个答案: