Estoy implementando la paginación, y debe centrarse. El problema es que los enlaces deben mostrarse como bloque, por lo que deben flotarse. Pero entonces, text-align: center;no funciona en ellos. Podría lograrlo dando el relleno de división de envoltura de la izquierda, pero cada página tendrá un número diferente de páginas, por lo que eso no funcionaría. Aquí está mi código:

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

Para tener la idea, lo que quiero:

Eliminar floaty usar s inline-blockpuede solucionar sus problemas:

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

(elimine las líneas que comienzan con -y agregue las líneas que comienzan 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 funciona en varios navegadores, incluso en IE6, siempre que el elemento sea originalmente un elemento en línea.

Cita de quirksmode :

Un bloque en línea se coloca en línea (es decir, en la misma línea que el contenido adyacente), pero se comporta como un bloque.

Esto a menudo puede reemplazar efectivamente los flotadores:

El uso real de este valor es cuando desea dar un ancho a un elemento en línea. En algunas circunstancias, algunos navegadores no permiten un ancho en un elemento en línea real, pero si cambia para mostrar: bloque en línea, puede establecer un ancho ". ( http://www.quirksmode.org/css/display.html#inlineblock ).

De la especificación W3C :

[bloque en línea] hace que un elemento genere un contenedor de bloque de nivel en línea. El interior de un bloque en línea está formateado como un cuadro de bloque, y el elemento en sí está formateado como un cuadro atómico de nivel en línea.

Dado que muchos años utilizo un viejo truco que aprendí en algún blog, lo siento, no recuerdo el nombre para darle créditos.

De todos modos, para centrar elementos flotantes, esto debería funcionar:

Necesitas una estructura como esta:

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

El truco consiste en dejar flotar a la izquierda para hacer que los contenedores cambien el ancho dependiendo del contenido. Que es una cuestión de posición: relativa y dejó 50% y -50% en los dos contenedores.

Lo bueno es que este es un navegador cruzado y debería funcionar desde IE7 +.

Centrar las carrozas es fácil . Solo use el estilo para contenedor:

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

cambiar el margen para elementos flotantes:

.pagination a{ margin: 0 2px; }

o

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

y deja el resto como está.

Es la mejor solución para mí para mostrar elementos como menús o paginación.

Fortalezas:

• navegador cruzado para cualquier elemento (bloques, elementos de lista, etc.)

• sencillez

Debilidades:

• funciona solo cuando todos los elementos flotantes están en una línea (lo que generalmente está bien para menús pero no para galerías).

@ arnaud576875 El uso de elementos de bloque en línea funcionará muy bien (navegador cruzado) en este caso ya que la paginación contiene solo anclas (en línea), sin elementos de lista o divs:

Fortalezas:

• Funciona para artículos multilínea.

Debilidades:

• espacios entre elementos de bloque en línea : funciona de la misma manera que un espacio entre palabras. Puede causar algunos problemas al calcular el ancho del contenedor y los márgenes de estilo. El ancho de los huecos no es constante, pero es específico del navegador (4-5px). Para deshacerme de estas brechas, agregaría al código arnaud576875 (no completamente probado):

  .pagination {espaciado de palabras: -1em; }

  .pagination a {espaciado de palabras: .1em; }

• no funcionará en IE6 / 7 en elementos de bloque y elementos de lista

Establecer su contenedor de widthen pxy añadir:

margin: 0 auto;

Referencia .

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

Creo que la mejor manera es usar en marginlugar de display.

Es decir:

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

Verifique el resultado y el código:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 no lo sabe inline-block. Debes agregar:

display:inline;
zoom: 1;

Agregue esto a su estilo

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

* Si el ancho de su contenedor es de 50 px, ponga 25 px, si es de 10 em ponga 5 em.

También puede hacerlo cambiando .paginationreemplazando "text-align: center" con dos o tres líneas de css para izquierda, transformación y, según las circunstancias, posición.

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

paso 1

crea dos o más divs que quieras y dales un ancho definido como 100px para cada uno, luego flota a la izquierda o derecha

paso 2

luego deformar estos dos div en otro div y darle el ancho de 200px. a este div se aplica el margen automático. boom funciona bastante bien. Verifique el ejemplo anterior.

Solo agregando

left:15%; 

en mi menú css de

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

hizo el truco de centrado también