0

right at the moment I am coding a responsive design. So there are a couple of elements within the code that are set to a relative or an unknown width.

In this special case I have a section-element which is used for a pager to switch through an unknown number of pages. So its width is undefined.

Due to layout reason the pager has alyways to be placed in the horizontal center of the parent element which is defined by a relative width.

I know how to center elements with absolute and relative widths, but in this case I am a bit helpless. I also searched here and found some posts, but I cannot find a solution that works fine.

Do you have any ideas?

Code:

<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>

Thanks in advance.

4

2 に答える 2

0

これを試しましたか？

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

min-width 値は一例であり、解像度ごとに min-width を調整します

于 2012-07-30T09:53:55.610 に答える
0

このフィドルを見て、これが役立つかどうかを確認してください。

http://jsfiddle.net/qQEQ6/

于 2012-07-30T10:46:24.310 に答える