La eliminación de float y el uso inline-block pueden 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); } 

 
 First 1 2 3 Last 
  

Desde hace muchos años uso un viejo truco que aprendí en un 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%; } 

 
 
 
 
Floated element
 
Floated element
 
Floated element
 
 
  

Centrar flotadores es fácil . Solo usa 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 rest tal como está.

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

Fortalezas:

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

• sencillez

Debilidades:

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

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

Fortalezas:

• funciona para artículos multilínea.

Weknesses:

• huecos entre elementos de bloque en línea : funciona de la misma manera que un espacio entre palabras. Puede causar algunos problemas para calcular el ancho del contenedor y los márgenes de diseño. El ancho de los espacios no es constante, pero es específico del navegador (4-5px). Para deshacerse de estas lagunas, 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 bloques y elementos de lista

Establezca el width su contenedor en px y agregue:

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

 
 First 1 2 3 Last 
  

IE7 no conoce inline-block . Debes agregar:

 display:inline; zoom: 1; 

 text-align: center; float: none; 

Creo que la mejor manera es usar margin lugar 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

Agregue esto a su estilo

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

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

paso 1

crea dos o más div’s que quieras y dales un ancho definido como 100px para cada uno y luego flotar hacia la izquierda o hacia la derecha

paso 2

luego distorsiona estos dos div en otro div y dale un ancho de 200px. a este div aplicar margen automático. boom funciona bastante bien. mira el ejemplo de arriba

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