Sto implementando l'impaginazione e deve essere centrato. Il problema è che i collegamenti devono essere visualizzati come blocchi, quindi devono essere mobili. Ma poi, text-align: center;non funziona su di loro. Potrei ottenerlo dando al pad wrapper il div pading di sinistra, ma ogni pagina avrà un numero diverso di pagine, quindi non funzionerebbe. Ecco il mio codice:

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

Per avere l'idea, quello che voglio:

La rimozione di floats e l'utilizzo inline-blockpossono risolvere i problemi:

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

(rimuovi le righe che iniziano con -e aggiungi le righe che iniziano con +.)

.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 funziona su più browser, anche su IE6, purché l'elemento sia originariamente un elemento incorporato.

Citazione da quirksmode :

Un blocco inline viene inserito in linea (cioè sulla stessa riga del contenuto adiacente), ma si comporta come un blocco.

questo spesso può sostituire efficacemente i galleggianti:

Il vero uso di questo valore è quando vuoi dare una larghezza ad un elemento inline. In alcune circostanze alcuni browser non consentono una larghezza su un elemento inline reale, ma se si passa alla visualizzazione: blocco inline è possibile impostare una larghezza. " ( http://www.quirksmode.org/css/display.html#inlineblock ).

Dalle specifiche del W3C :

[blocco in linea] fa in modo che un elemento generi un contenitore di blocchi a livello in linea. L'interno di un blocco inline è formattato come una casella di blocco e l'elemento stesso è formattato come una casella di livello inline atomico.

Da molti anni utilizzo un vecchio trucco che ho imparato in alcuni blog, mi dispiace non ricordare il nome per dargli crediti.

In ogni caso per centrare gli elementi mobili dovrebbe funzionare:

Hai bisogno di una struttura come questa:

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

il trucco sta dando il galleggiante a sinistra per far cambiare la larghezza dei contenitori a seconda del contenuto. Che è una questione di posizione: relativo e lasciato il 50% e -50% sui due contenitori.

La cosa buona è che si tratta di un browser incrociato e dovrebbe funzionare da IE7 +.

Centrare i galleggianti è facile . Usa lo stile per il contenitore:

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

cambia il margine per gli elementi mobili:

.pagination a{ margin: 0 2px; }

o

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

e lascia il resto così com'è.

È la soluzione migliore per me per visualizzare cose come i menu o l'impaginazione.

Punti di forza:

• cross-browser per tutti gli elementi (blocchi, voci di elenco ecc.)

• semplicità

Punti di debolezza:

• funziona solo quando tutti gli elementi fluttuanti si trovano su una riga (che di solito è ok per i menu ma non per le gallerie).

@ arnaud576875 Uso del blocco inline elementi funzionerà alla grande (cross-browser) in questo caso poiché l'impaginazione contiene solo ancore (inline), nessuna lista o div:

Punti di forza:

• funziona per articoli multilinea.

Weknesses:

• spazi vuoti tra gli elementi inline block - funziona allo stesso modo di uno spazio tra le parole. Potrebbe causare problemi nel calcolo della larghezza del contenitore e dei margini di stile. La larghezza degli spazi non è costante ma è specifica del browser (4-5px). Per liberarmi di queste lacune aggiungerei al codice arnaud576875 (non completamente testato):

  .pagination {interpolazione di parole: -1em; }

  .pagination a {spaziatura di parole: .1em; }

• non funzionerà in IE6 / 7 su elementi di blocco ed elenco

Imposta il contenitore widthin pxe aggiungi:

margin: 0 auto;

Riferimento .

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

Penso che il modo migliore sia usare margininvece di display.

Vale a dire:

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

Verifica il risultato e il codice:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 non lo sa inline-block. Devi aggiungere:

display:inline;
zoom: 1;

Aggiungi questo al tuo stile

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

* Se la larghezza del tuo contenitore è 50 px, inserisci 25 px, se è 10em, inserisci 5em.

Puoi anche farlo cambiando .paginationsostituendo "text-align: center" con due o tre righe di CSS per sinistra, trasformazione e, a seconda delle circostanze, posizione.

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

passo 1

crea due o più div che desideri e dai loro una larghezza definita come 100px per ciascuno, quindi spostalo a sinistra oa destra

passo 2

quindi deformare questi due div in un altro div e dargli la larghezza di 200px. a questo div applicare il margine auto. boom funziona abbastanza bene. controlla l'esempio sopra.

Sto solo aggiungendo

left:15%; 

nel mio menu CSS di

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

ha fatto anche il trucco di centraggio