Comment j’ai centrer des éléments de flotteur ?

Question

Je suis la mise en œuvre de la pagination, et il doit être centré. Le problème est que les liens doivent être affichés en tant que bloc, de sorte qu'ils doivent être évoquée. Mais ensuite, text-align: center; ne fonctionne pas sur eux. J'ai pu réaliser par le wrapper div rembourrage de gauche, mais chaque page peut avoir un nombre différent de pages, donc ça ne fonctionne pas. Voici mon code HTML:

<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div> <!-- end: .pagination -->

Et le CSS:

.pagination {
    text-align: center;
}
.pagination a {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 3px;
    background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
    width: 90px;
    background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
    width: 60px;
    background: url(/images/structure/pagination-button-first.png);
}

Pour se faire une idée, ce que je veux:

Answer 1

Retrait d' floats, et à l'aide de inline-block peut résoudre votre problèmes:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(supprimer les lignes commençant par - et ajouter les lignes commençant par +.)

inline-block des œuvres de la croix-navigateur, même sur IE6 tant que l'élément est à l'origine un élément inline.

Citation de quirksmode:

Une ligne de bloc est placé en ligne (ie. sur la même ligne que adjacentes de contenu), mais il se comporte comme un bloc.

souvent, cela peut effectivement remplacer les flotteurs:

L'utilisation réelle de cette valeur, c'est quand vous voulez donner un élément inline largeur. Dans certaines circonstances, certains navigateurs ne permettent pas à une largeur sur un véritable élément inline, mais si vous passez en display: inline-block vous êtes autorisé à définir une largeur." ( http://www.quirksmode.org/css/display.html#inlineblock ).

À partir du W3C spec:

[inline-block] provoque un élément pour générer une ligne de niveau bloc conteneur. L'intérieur d'un inline-block est formaté comme un bloc, boîte, et l'élément lui-même est mis en forme atomique inline-niveau de la zone.

Answer 2

Depuis de nombreuses années, j'utilise un vieux truc que j'ai appris dans certains blog, je suis désolé, je ne me souviens pas le nom à lui donner des crédits.

De toute façon au centre flottants, cela devrait fonctionner:

Vous avez besoin d'une structure comme ceci:

<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">

            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>

        </ul>
    </div>
</div>

et quelques règles CSS:

.main-container {
    float:left;
    position:relative;
    left:50%;
   /*overflow:hidden;*/
}

.fixer-container {
    float:left;
    position:relative;
    left:-50%;
}

le truc, c'est de donner à flotteur gauche pour faire les conteneurs de modifier la largeur en fonction du contenu. Que est une question de position:relative et à gauche 50% et -50% sur les deux contenants.

la bonne chose est que c'est de la croix-navigateur, et devrait fonctionner à partir de ie7+

Answer 3

Centrage de la flotte est facile. Utilisez simplement le style du conteneur:

.pagination{ display: table; margin: 0 auto; }

modifier la marge pour les éléments flottants:

.pagination a{ margin: 0 2px; }

ou

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

et de laisser le reste comme il est.

C'est la meilleure solution pour moi, pour afficher des choses comme les menus ou la pagination.

Points forts:

• croix-navigateur pour tous les éléments (blocs, la liste des objets, etc.)

• simplicité

Faiblesses:

• il ne fonctionne que lorsque tous les éléments flottants sont dans une ligne (ce qui est généralement ok pour les menus mais pas pour les galeries).

@arnaud576875 à l'Aide de inline-block éléments fonctionnent bien (cross-browser) dans ce cas, comme la pagination contient juste les ancres (inline), pas de liste d'éléments ou de divs:

Points forts:

• fonctionne pour les multi-éléments.

Weknesses:

• les écarts entre les inline-block éléments - , il fonctionne de la même manière qu'un espace entre les mots. Il peut causer quelques problèmes pour le calcul de la largeur du conteneur et le style des marges. Les lacunes de la largeur n'est pas constante, mais elle est spécifique de navigateur (4-5px). Pour se débarrasser de ce écarts, je voudrais ajouter arnaud576875 code (pas entièrement testé):

  .la pagination{ word-spacing: -cadratin (1 em; }

  .la pagination a{ word-spacing: .Cadratin (1 em; }

• il ne fonctionnera pas dans IE6/7 sur le bloc et la liste des éléments

Answer 4

Définir votre conteneur en et ajoutez :

Référence.

Answer 5

IE7 ne sait pas `` . Vous devez ajouter :