- Floated element
- Floated element
- Floated element
Estoy implementando la paginación, y necesita estar centrada. El problema es que los enlaces deben mostrarse como bloques, por lo que deben flotarse. Pero luego, text-align: center;
no funciona en ellos Podría lograrlo dándole a la izquierda el relleno div de envoltura, pero cada página tendrá un número diferente de páginas, así 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); }
Para tener la idea, lo que quiero:
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); }
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:
@ 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:
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); }
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:
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.
float object center
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
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