Центрирование определенного элемента внутри div с помощью CSS?

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 всегда находится в центре. Как сделать так, чтобы текущий номер страницы всегда находился в центре, независимо от того, является ли он средним элементом в списке ссылок?

EDIT:

Хорошо, чтобы быть немного более ясно, в приведенном выше случае, я хочу посмотреть, как этот

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

EDIT: Чтобы ответить на ваш пересмотренный вопрос:

Я бы использовал разметку следующим образом:

<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 
{ 
    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*/ 

}