Comment puis-je centrer les éléments flottants?

Je mets en œuvre la pagination et elle doit être centrée. Le problème est que les liens doivent être affichés en tant que blocs, ils doivent donc être flottants. Mais alors, text-align: center; ne travaille pas sur eux. Je pourrais y arriver en donnant à la partition wrapper un caractère de gauche, mais chaque page aura un nombre de pages différent, donc cela ne fonctionnera pas. Voici mon code:

 .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 avoir l’idée, ce que je veux:

texte alt

Supprimer des valeurs float et utiliser inline-block peut résoudre vos 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); } 

(supprimez les lignes commençant par - et ajoutez les lignes commençant par + .)

 .pagination { text-align: center; } .pagination a { + display: inline-block; width: 30px; height: 30px; 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); } 
   

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

Quoi qu’il en soit, pour centrer les éléments flottants, cela devrait fonctionner:

Vous avez besoin d’une structure comme celle-ci:

  .main-container { float: left; position: relative; left: 50%; } .fixer-container { float: left; position: relative; left: -50%; } 
 
  • Floated element
  • Floated element
  • Floated element

Le centrage des flotteurs est facile . Utilisez simplement le style pour le conteneur:

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

changer 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 laisser le rest tel quel.

C’est la meilleure solution pour afficher des choses comme les menus ou la pagination.

Forces:

  • navigateur croisé pour tous les éléments (blocs, éléments de liste, etc.)

  • simplicité

Faiblesses:

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

@ arnaud576875 Utiliser des éléments inline-block fonctionnera très bien (cross-browser) dans ce cas car la pagination ne contient que des ancres (inline), aucun list-items ou divs:

Forces:

  • fonctionne pour les éléments multilignes.

Weknesses:

  • les espaces entre les éléments de bloc en ligne – cela fonctionne de la même manière qu’un espace entre les mots. Cela peut causer des problèmes lors du calcul de la largeur du conteneur et des marges de style. La largeur des lacunes n’est pas constante mais elle est spécifique au navigateur (4-5px). Pour se débarrasser de ces lacunes, j’appendais au code arnaud576875 (non entièrement testé):

    .pagination {espacement des mots: -1em; }

    .pagination a {espacement des mots: .1em; }

  • il ne fonctionnera pas dans IE6 / 7 sur les éléments de bloc et de liste

Définissez la width votre conteneur en px et ajoutez:

 margin: 0 auto; 

Référence

Utiliser Flex

 .pagination { text-align: center; display:flex; justify-content: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); } 
   

IE7 ne connaît pas inline-block . Vous devez append:

 display:inline; zoom: 1; 
 text-align: center; float: none; 

Je pense que le meilleur moyen est d’utiliser la margin plutôt que l’ display .

C’est à dire:

 .pagination a { margin-left: auto; margin-right: auto; width: 30px; height: 30px; background: url(/images/structure/pagination-button.png); } 

Vérifiez le résultat et le code:

http://cssdeck.com/labs/d9d6ydif

Ajoutez ceci à votre style

 position:relative; float: left; left: calc(50% - *half your container length here); 

* Si la largeur de votre conteneur est de 50px, mettez 25px, si c’est 10em mettez 5em.

    float object center    

étape 1

créer deux ou plusieurs div que vous voulez et leur donner une largeur définie comme 100px pour chacun puis flotter à gauche ou à droite

étape 2

puis déformez ces deux div dans une autre div et donnez-lui la largeur de 200px. à cette div appliquer une marge automatique. boum ça marche plutôt bien. vérifiez l’exemple ci-dessus.

Juste en ajoutant

 left:15%; 

dans mon menu CSS de

 #menu li { float: left; position:relative; left: 15%; list-style:none; } 

a fait le tour de centrage aussi