css float - right - ¿Cómo centrar elementos flotantes?
float right center (11)
Añade esto a tu estilo
position:relative;
float: left;
left: calc(50% - *half your container length here);
* Si el ancho de su contenedor es de 50px, coloque 25px, si es de 10em, ponga 5em.
Estoy implementando la paginación, y tiene que estar centrado. El problema es que los enlaces deben mostrarse como un bloque, por lo que deben flotar. Pero entonces, text-align: center; no funciona en ellos. Podría lograrlo al darle el relleno del div envoltorio a la izquierda, pero cada página tendrá un número diferente de páginas, por lo que 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:
Creo que la mejor manera es usar el 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);
}
Compruebe el resultado y el código:
Desde hace muchos años que uso un viejo truco que aprendí en un blog, lo siento, no recuerdo el nombre para darle crédito.
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 es dejar flotar a la izquierda para hacer que los contenedores cambien de ancho según el contenido. Eso es una cuestión de posición: relativo y dejó 50% y -50% en los dos contenedores.
Lo bueno es que este es un navegador cruzado y debería funcionar desde IE7 +.
La eliminación de float s y el uso de 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);
}
<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 todos los 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 al elemento en línea. En algunas circunstancias, algunos navegadores no permiten un ancho en un elemento en línea real, pero si cambia a mostrar: bloque en línea, se le permite establecer un ancho ". ( quirksmode ).
De la especificación W3C :
[inline-block] 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 de nivel en línea atómico.
Solo añadiendo
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
Centrar los flotadores es fácil . Solo usa el estilo para el 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 dejar el resto 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:
- funciona solo cuando todos los elementos flotantes están en una línea (lo que generalmente es correcto 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 solo contiene anclajes (en línea), sin elementos de lista o divs:
Fortalezas:
- Obras para artículos multilínea.
Weknesses:
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 espacios no es constante, pero es específico del navegador (4-5px). Para deshacerme de estos vacíos, añadiría al código arnaud576875 (no probado completamente):
.pagination {word-spacing: -1em; }
.pagination a {word-spacing: .1em; }
no funcionará en IE6 / 7 en elementos de bloque y elementos de lista
IE7 no sabe en inline-block . Usted debe agregar:
display:inline;
zoom: 1;
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 -->
<!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
cree dos o más divs que desee y déles un ancho definido como 100px para cada uno, luego flote hacia la izquierda o hacia la derecha
paso 2
luego deforma estos dos div en otro div y dale el ancho de 200px. A este div se aplica el margen automático. boom funciona bastante bien. verifique el ejemplo anterior.
text-align: center;
float: none;