- Floated element
- Floated element
- Floated element
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:
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:
@ 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:
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:
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
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
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