Выравнивание блока по горизонтале делается следующим образом:

 

#artnav{
         width:300px;
         margin:0 auto;
}

Вопрос возникает с выравнивание плавающего элемента, float.

Как это сделать средствами css, я не нашел. Но это можно сделать с помощью js.

Например, горизонтальное меню с плавающими элементами списка:

<div id="artnav">
	<ul id="artmenu">
		<li class="item1"><a href="#"><span>Что такое Joomla!</span></a></li>
		<li class="item2"><a href="#"><span>Что такое Joomla!</span></a></li>
	</ul>
</div>

Чтобы его отцентрировать ниже добавляем следующий код:

<script type="text/javascript">
var artnav = document.getElementById( 'artnav' );
var artmenu = document.getElementById( 'artmenu' );
indentleft = (parseInt(artnav.offsetWidth) - parseInt(artmenu.offsetWidth))/2 - 20;

artnav.style.paddingLeft = indentleft + 'px';
</script>

Сам список ul тоже нужно сделать плавающим - float.