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

标签 html css width center responsive-design

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

在这种特殊情况下,我有一个 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>

提前致谢。

最佳答案

看看这个 fiddle ,看看是否有帮助:

http://jsfiddle.net/qQEQ6/

关于html - 如何使宽度未知的元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11718975/

相关文章:

javascript - 当 $_POST 变量点击页面时自动提交表单

javascript - 创建时隐藏框

html - css 文字和图片在同一行

javascript - 页面向下滚动一半时 scrollTop 不工作

css - 1% 迷失在 Chrome 中

CSS float 和填充

javascript - 如何固定元素的位置但相对于容器

css - TreeCheckbox CSS 可见文件夹

html - CSS 位置 : table and div inside div

html - 最小宽度和最大宽度不适用于图像