html - 如何使宽度未知的元素居中？

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 值是一个示例，您可以为每个分辨率调整 min-width

Answer 2

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

http://jsfiddle.net/qQEQ6/