J'implémente la pagination, et elle doit être centrée. Le problème est que les liens doivent être affichés sous forme de bloc, ils doivent donc être flottants. Mais alors, text-align: center;ça ne marche pas. Je pourrais y parvenir en donnant le rembourrage div wrapper de gauche, mais chaque page aura un nombre différent de pages, donc cela ne fonctionnerait 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);
}

<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 -->

Pour avoir l'idée, ce que je veux:

La suppression de floats et son utilisation inline-blockpeuvent 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);
}

<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 -->

inline-block fonctionne sur plusieurs navigateurs, même sur IE6 tant que l'élément est à l'origine un élément en ligne.

Citation de quirksmode :

Un bloc en ligne est placé en ligne (c'est-à-dire sur la même ligne que le contenu adjacent), mais il se comporte comme un bloc.

cela peut souvent remplacer efficacement les flotteurs:

L'utilisation réelle de cette valeur est lorsque vous souhaitez donner une largeur à un élément en ligne. Dans certaines circonstances, certains navigateurs n'autorisent pas de largeur sur un élément réel en ligne, mais si vous passez à l'affichage: bloc en ligne, vous êtes autorisé à définir une largeur. » ( http://www.quirksmode.org/css/display.html#inlineblock ).

De la spécification W3C :

[inline-block] fait qu'un élément génère un conteneur de bloc de niveau inline. L'intérieur d'un bloc en ligne est formaté comme une zone de bloc et l'élément lui-même est formaté comme une zone atomique de niveau en ligne.

Depuis de nombreuses années, j'utilise un vieux truc que j'ai appris dans un blog, je suis désolé de ne pas me souvenir 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%;
    }

<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>

l'astuce consiste à laisser flotter à gauche pour que les conteneurs changent la largeur en fonction du contenu. C'est une question de position: relative et laissé 50% et -50% sur les deux conteneurs.

La bonne chose est que c'est un navigateur croisé et devrait fonctionner à partir d'IE7 +.

Le centrage des flotteurs est facile . Utilisez simplement le style de 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 laissez le reste tel quel.

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

Forces:

• cross-browser 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 L'utilisation d' éléments de bloc en ligne fonctionnera très bien (cross-browser) dans ce cas car la pagination ne contient que des ancres (en ligne), aucun élément de liste ou div:

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 entraîner des problèmes de calcul de la largeur du conteneur et des marges de style. La largeur des espaces n'est pas constante mais elle est spécifique au navigateur (4-5px). Pour me débarrasser de ces lacunes, j'ajouterais au code arnaud576875 (non entièrement testé):

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

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

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

Réglez votre conteneur de widthdans pxet d' ajouter:

margin: 0 auto;

Référence .

Utilisation de 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);
}

<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 -->

Je pense que la meilleure façon est d'utiliser marginau lieu de 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

text-align: center;
float: none;

IE7 ne sait pas inline-block. Vous devez ajouter:

display:inline;
zoom: 1;

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 elle est de 10em, mettez 5em.

Vous pouvez également le faire en changeant .paginationen remplaçant "text-align: center" par deux à trois lignes de CSS pour la gauche, la transformation et, selon les circonstances, la position.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.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);
}

<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 -->

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

étape 1

créez deux ou plusieurs div que vous voulez et donnez-leur une largeur définie comme 100px pour chacun, puis faites-la flotter à gauche ou à droite

étape 2

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

Ajout juste

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