Comment centrer liste-éléments dans une colonne

Question

Je suis en train de centrer les numéros de page en bas de ce blog test ...

http://jocelynwarner.com/test/

au centre entre les boutons précédent et suivant mais je ne peux pas Je pense à la façon de le faire, j'ai essayé quelques tutoriels différents, mais ils ne semblaient pas vraiment aider avec ça.

Tous les conseils sur la façon de les placer au centre dans la colonne de gauche (la largeur du contenu du blog - barre latérale) seraient grandement appréciés.

Answer 1

Pablo a-t-il raison. C'est un bon cas où l'utilisation display:inline-block permet de simplifier les choses. Soit dit en passant, voici un bon article sur les avantages et les inconvénients de l'utiliser quand vous voulez une liste horizontale: CSS display: inline-Block: Why It Rocks, And Why It Sucks

En outre, c'est un peu sans rapport, mais selon votre description que vous voulez la div pagination être la même taille de la colonne de contenu, non? dans ce cas, vous devriez donner à la classe de pagination un width de 548px, le même que votre classe de messages, non?

Answer 2

Je pris la peine et copie la Div pagination

<div class="pagination"> 
<div class="third"></div> 
<div class="third"> 
    <ul class="page-numbers page-bright current-page-cyan behind-dark fill-gradient shape- round"> 
    <li><span class="page-numbers current">1</span></li> 
    <li><a href="http://jocelynwarner.com/test/page/2/" class="page-numbers">2</a></li> 
    <li><a href="http://jocelynwarner.com/test/page/3/" class="page-numbers">3</a></li> 
    <li><a href="http://jocelynwarner.com/test/page/4/" class="page-numbers">4</a></li> 
    </ul> 
</div> 
<div class="third"> 
    <a href="http://jocelynwarner.com/test/page/2/"> 
    <p class="next">Next »</p> 
    </a> 
</div> 
</div> 

Voici le nouveau style qui le fera Centré

.pagination { 
     border-top:1px dotted; 
     float:left; 
     font-size:12px; 
     margin-top:10px; 
     padding-top:10px; 
     text-align:center; 
     width:708px; 
    } 
    .pagination .third { 
     display:inline-block; 
    } 
    ul.page-numbers { 
     /*Clear all styles for this*/ 
    } 

Je recommande la lecture de la référence CSS et tutoriels à w3Schools

Answer 3

Pour développer la réponse de Pablo afin de soutenir correctement inline-block sur tous les navigateurs:

.pagination .third { 
    /* Supports Firefox < 3.0, note 
     that it is not 1:1 identical 
     to inline-block but it is 
     usually a good substitute */ 
    display: -moz-inline-box; 

    /* Standards support */ 
    display: inline-block; 

    /* IE 6 & 7 do not support 
     inline-block for block- 
     level elements; fortunately 
     inline + hasLayout is exactly 
     the same as inline-block in 
     these browsers */ 
    *display: inline; 
    *zoom: 1; 
}