¿Cómo centro los elementos flotantes?

355

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 -->
Expandir fragmento

Para tener la idea, lo que quiero:

texto alternativo

css-float  center  css 
— Miguel
fuente
Todo el propósito de la propiedad flotante es colocar un elemento a lo largo del lado izquierdo o derecho de su contenedor.
— Rob
3
@Rob: Bueno, necesitaba definir el ancho y la altura de los elementos de enlace, lo que solo se puede hacer en elementos de bloque, pero cuando haces que los enlaces se bloqueen, se extienden en una nueva línea cada uno, por eso los hice flotar.
— Mike
Solución alternativa, cuando no quiere / no puede usar el bloqueo en línea. stackoverflow.com/questions/1232096/…
— hakunin
1
Creo que esta pregunta merece la atención del moderador ya que su título actual y sus respuestas son engañosas. La pregunta no se trata de contenido flotante en el centro, sino de centrar contenido. Flotante significa que el contenido de hermanos no flotantes debe llenar los vacíos restantes y eso claramente no es deseado ni logrado aquí.
— tao
8
@AndreiGheorghiu si crees eso, sugiere una edición en lugar de marcarlo para modificaciones. Cualquiera puede editar estas preguntas, así que edite la pregunta y escriba una explicación detallada en el motivo de edición. Esto es algo que cualquier usuario puede hacer, no tiene que ser un moderador. No hay nada de malo en la pregunta o en las respuestas que requieren la intervención del moderador
— Zoe

Respuestas:

406

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

Mostrar fragmento de código

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.

— Arnaud Le Blanc
fuente
10
Consejo: no te olvides de la alineación vertical.
— Synexis
55
Sí, este es uno de los pocos casos que he encontrado en el que la alineación vertical realmente hace lo que esperas.
— Mike Turley
44
La desventaja de este método es que es difícil controlar el espacio horizontal, ya que puede aparecer un espacio en blanco entre los elementos.
— Xavier Poinas
@XavierPoinas: use font-size: 0; en el padre para solucionar ese problema
— roelleor
Sin embargo, tenga en cuenta que "font-size: 0" no solía funcionar en dispositivos Android. No estoy seguro si esto sigue siendo cierto para las versiones recientes.
— Andreas Baumgart
150

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>
Expandir fragmento

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

— lukart
fuente
1
Un recordatorio de que esto funciona si solo hay 1 elemento flotante único.
— Wtower
El problema con esto es que aparecerá una barra de desplazamiento horizontal porque el div externo se extiende más allá de la pantalla. Además, cuando la lista se ajusta a otra línea, todo se alinea a la izquierda.
— cleversprocket
Esto no hará la diferencia sin configurar el ancho máximo del contenedor, margin: 0 auto;hace un mejor trabajo en este caso
— Murhaf Sousli
1
Para mí, float: left;no fue necesario en .main-containery .fixer-container.
— csum
@cleversprocket Resolví el desplazamiento horizontal envolviendo todo en un solo div conoverflow: hidden;
— csum
36

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

— Romprzy
fuente
display: el truco de la mesa es increíble, solo hice todo como debería con solo unas pocas líneas. Necesito recordar eso. Saludos
— Kilop
La técnica de bloqueo en línea funciona extremadamente bien. Afortunadamente, los elementos que estoy usando (elementos div anidados) para esto pueden manejar bien la brecha.
— karolus
También puede eliminar los espacios en bloque en línea colocando el tamaño de fuente a cero, luego restaurando su valor anterior dentro de los elementos secundarios
— Mike Causer,
15

Establecer su contenedor de widthen pxy añadir:

margin: 0 auto;

Referencia .

— Barney
fuente
1
Para mí, esta es la mejor respuesta: P.
— alansiqueira27
3
Esto solo funcionaría si el ancho del contenedor es apropiado, que es el problema cuando contiene elementos flotantes.
— Wtower
11

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 -->
Expandir fragmento

— Santosh Khalse
fuente
5

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

— Tarod
fuente
1
Funciona con solo margen: auto; en lugar de las propiedades individuales izquierda y derecha también.
— cellepo
2

IE7 no lo sabe inline-block. Debes agregar:

display:inline;
zoom: 1;
— Krisada Art
fuente
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.

— 11-
fuente
1

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 -->
Expandir fragmento

— mwag
fuente
0 
<!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.

-1

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

— usuario3085662
fuente
44
El 15% es completamente arbitrario.
— Wtower
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.