Question

我有一些看起来像这样的HTML

<div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5'>5</a></div>

基本上，这是一个导航菜单，当前页面为2.现在，问题是，我希望当前页面（在这种情况下为2）始终居中。我只是使用text-align:center，但这只意味着3总是在中心。如何使当前页码始终位于中心，无论它是否是链接列表中的中间元素？

编辑：

好的，为了更清楚一点，在上面的例子中我希望看起来像这样

 1 2 3 4 5
   ^
   |
  This should be centered in the page and the spacing between the others
  should remain the same. So the links will actually be slightly offcenter to
  the right, but the current page will be in the center of the page.

Answer 1

编辑：要回答您修改过的问题：

我会像这样使用标记

<div id="#nav">
    <div>
        <span class="spacer"></span>
        <a href ='./?page=1'>1</a> 
        2 
        <a href ='./?page=3'>3</a> 
        <a href ='./?page=4'>4</a> 
        <a href ='./?page=5'>5</a>
    </div>
</div>

然后是css（宽度计算得当）：

#nav div
{
    margin:0 auto;
    /* width: 9 * link width */
}
#nav div .spacer
{
    display:inline-block;
    /* width: 3 * link width */
}

Answer 2

我想我看到你想要做的事情。似乎它应该非常简单，但事实并非如此。我认为您可能需要求助于绝对定位并计算服务器上的精确值（或客户端上的javascript）。我还认为你需要一个非链接元素的容器。像这样：

<style type="text/css>
 #nav {position: relative}
 #nav ol {list-style: none; margin: 0; padding: 0}
 #nav ol li {display: block; margin: 0; padding: 0; position: absolute; width: 10%; text-align: center}
 #nav ol li a {}
</style>

<div id="nav">
 <ol>
  <li style="left: 35%" ><a href="?p=1">1</a></li>
  <li style="left: 45%" >2</li>
  <li style="left: 55%" ><a href="?p=1">3</a></li>
  <li style="left: 65%" ><a href="?p=1">4</a></li>
  <li style="left: 75%" ><a href="?p=1">5</a></li>
 </ol>
</div>

Answer 3

也许是这样的。如果宽度没有固定，那么我认为你需要使用Javascript来进行ol-margin计算。

ol
{
    display: block;
     height: 20px;
     margin-left: 0;
}

ol li
{
     float: left;
     width: 20px;
     height: 20px;

}

body#page2 ol
{
    margin-left: 300px;  /*calculate this by hand or use jQuery to do the math*/

}

使用CSS将div中的特定元素居中？

3 个答案: