Как отцентрировать несколько блоков

[BaNru]

Имеем HTML

<div class="page_str">
  <a href='1'>1</a>
  <a href='2'>2</a>
  <a href='3'>3</a>
  ...
  <a href='100'>100</a>
  <a href='101'>101</a>
</div>

По коду наверное догадались, что это навигация? (Тут же все экстрасенсы. КЭП)

CSS

.page_str {
  position: relative;
  height: 35px;
  width: 600px;
  left: 50%;
  margin-left: -300px;
  display: block;
  text-align: center;
}

.page_str a {
  display: block;
  float: left;
  padding: 0.2em;
  text-align: center;
  text-decoration: none;
  width: 27px;
  height: 18px;
}

Ссылки сделаны display: block;, и главное что бы они шли друг за другом float: left;
Количество этих ссылок точно не известно, только максимальное их число и минимальное.

Вопрос: как сделать, что бы они центрировались относительно страницы или div, но оставались в block?
Можно вариант решения как на CSS (мне кажется, необходимо ссылки вложить в еще один контейнер, только каким образом - не соображу ни как), либо на jQuery.

Поясню. На данный момент сам div центрируется по странице, но ссылки прилипают к левому краю. Всё было бы замечательно, если было бы неизменное количество этих ссылок. Я могу высчитать ширину при максимальном их количестве, но если их будет минимальное количество, то явно видно что они не по центру.

 

[Snickers]

ну раз уж width нам известен и ширина родительского элемента тоже фиксирована или объявлена в процентах.
то ничего не мешает я думаю добавить к ссылкам свойста:

margin-left:auto;
margin-right:auto;

 

[BaNru]

Неа, не работает. Работоспособность главным образом нужна в FF, на втором месте желательна в Opera.
Вот скрин, что бы было понятнее

Вот так вот выглядит, если максимальное число элементов. Все отлично замечательно

Но вот если их будет меньше...вот допустим минимальное число элементов.


UPD
Может пригодиться
XHTML 1.0 Strict

 

[Snickers]

Неа, не работает. Работоспособность главным образом нужна в FF, на втором месте желательна в Opera.
Вот скрин, что бы было понятнее

Вот так вот выглядит, если максимальное число элементов. Все отлично замечательно
Посмотреть вложение 1521
Но вот если их будет меньше...вот допустим минимальное число элементов.
Посмотреть вложение 1522

UPD
Может пригодиться
XHTML 1.0 Strict

да. видимо только js.
обернуть ссылки в див с флоат. высчитывать его ширину, вычитать её из ширины блока навигации. делить на два и изменять левый отступ соответственно на это значение)

 

[BaNru]

Да я думал на эту тему. Вот только как?
Функция $().width() не работает, не те значения берет.

Еще вот есть прикольный похожий примерчик http://www.cssplay.co.uk/menu/gallery.html#nogo
Там картинка ставиться по центру, не зависимо от ее ширины.
Но у меня проблема в том, что если обернуть дивом, и у внутреннего дива не ставить ширину, то он занимает все 100% от пред контейнера. Как заставить див занимать по возможному минимуму?

 

[Snickers]

Да я думал на эту тему. Вот только как?
Функция $().width() не работает, не те значения берет.

Еще вот есть прикольный похожий примерчик http://www.cssplay.co.uk/menu/gallery.html#nogo
Там картинка ставиться по центру, не зависимо от ее ширины.
Но у меня проблема в том, что если обернуть дивом, и у внутреннего дива не ставить ширину, то он занимает все 100% от пред контейнера. Как заставить див занимать по возможному минимуму?

добавить ему флоат. я же написал. а размер можно доставать и так $().css('width');

 

[BaNru]

Ура! Спасибо Snickers!

Вот что получилось

Незначительное изменение СSS .page_str. Убрал ширину и маргин - перекладываем их на JS

.page_str {
  position: relative;
  height: 35px;
  left: 50%;
  float: left;
  display: block;
}

И сам код JS

$(".page_str").css({ "marginLeft":parseFloat($(".page_str").css("width"))/-2});

Опишу для тех кто не знает JS

$(".page_str") - указываем объект, в данном случае class="page_str"
css({ "marginLeft": - говорим скрипту, что будем добавлять margin-left

parseFloat($(".page_str").css("width"))/-2}) =>
$(".page_str").css("width") - выдираем размер, ширину блока class="page_str"
parseFloat($(....))/-2}) - так как нам .css() выдает значение в виде **.px, то превращаем это значение в числовое с помощью parseFloat() и делим его на минус два.
Вот и всё.

Этот же скрипт можно было записать по действиям

var page_str = $(".page_str").css("width");
var page_str = parseFloat(page_str)/-2;
$(".page_str").css({ "marginLeft":page_str});

Да, и главное не забыть обернуть всё это в

$(document).ready(function(){
   ...
});