[XHTML] Wyśrodkowanie menu nawigacyjnego

Zamierzam stworzyć menu nawigacyjne w galerii zdjęć na zasadzie:

strzałka w lewo kwadrat kwadrat kwadrat kwadrat strzałka w prawo

#nav {

	background-color: #8CE686;	

	height: 40px;

}


#nav a.arrow_left{

	display: block;

	height: 40px;

	float: left;

}

#nav a.arrow_left img{

	margin: 5px ;

}


#nav a.arrow_right{

	display: block;

	height: 40px;

	float: right;

}

#nav a.arrow_right img{

	margin: 5px;

}


#nav ul{

	margin: 0 auto;

	height: 30px;

	width: 200px;	

	background-color: #BFBFBF;

	list-style: none;


}

Problem polega na tym że o ile lewa strzałka jest tam gdzie ma być, to prawa jest po prawej stronie ale nie w tej samej lini co

  • z kwadratami ,nie wiem czy to że ul jest wyśrodkowane za pomocą margin spycha tą strzałkę? Zależy mi by wszystkie lelementy były wyświetlane blokowo.

arrowl

arrowr

Spróbuj “display: inline-block” dla wszystkich elementów (strzałek i kwadratów), a potem na nadrzędny kontener daj “text-align: center”.