Centrer du texte par raport à un flottant

J'aimerais centrer les fleches, le 2, 3 et 4 par rapport à "Première page". La c'est trop à droite.

Voyez l'image ci dessous :



Mon html

<div id="paginationControl">
  <span class="lastpage"><a href="/zend_blog/public/index/index/page/1">&lt;&lt; Première page</a></span>
<span class="bandeau">
  <a href="/zend_blog/public/index/index/page/3">&lt;&lt;</a> | 
      <span class="pagesInRange"><a href="/zend_blog/public/index/index/page/2">2</a></span> | 
      <span class="pagesInRange"><a href="/zend_blog/public/index/index/page/3">3</a></span> | 
      <span class="current">4</span> | 
</span>
</div>

Mon CSS :

span.disabled{
color:red;
}

span.lastpage{
float:left;
}

span.firstpage{
float:right;
}

span.bandeau{

}

span.pagesInRange{
padding:2px 6px;
border:1px solid grey;
}

span.current{
padding:2px 6px;
border:1px solid grey;
font-weight:bold;
}

.pagesInRange a, .current a{
text-decoration:none;
}

div#paginationControl{
margin-top:7px;
text-align:center;
font-family:cursive;
}

Modifié par guice11 (13 Aug 2010 - 17:20)