¿Cómo centro elementos flotantes?
Estoy implementando la paginación y es necesario centrarla. El problema es que los enlaces deben mostrarse como bloques, por lo que deben flotar. Pero claro, text-align: center;no funciona con ellos. Podría lograrlo dándole al contenedor div relleno de 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 una idea, lo que quiero:
Eliminar floatmensajes de correo electrónico y usarlos 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 +).
Mostrar fragmento de código
inline-blockfunciona en varios navegadores, incluso en IE6, siempre que el elemento sea originalmente un elemento en línea.
Cita de modo peculiar :
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 a los flotadores:
El uso real de este valor es cuando desea darle 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 cambias a display: inline-block puedes establecer un ancho”. ( http://www.quirksmode.org/css/display.html#inlineblock ).
De la especificación W3C :
[inline-block] hace que un elemento genere un contenedor de bloques a nivel de línea. El interior de un bloque en línea tiene el formato de un cuadro de bloque y el elemento en sí tiene el formato de un cuadro de nivel en línea atómico.
Desde hace muchos años uso 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 para que los contenedores cambien el ancho según el contenido. Eso es una cuestión de posición: relativa y dejó 50% y -50% en los dos contenedores.
Lo bueno es que esto es para varios navegadores y debería funcionar desde IE7+.
