Pregunta Cómo centrar divisiones flotantes en un contenedor


¿Es posible centrar divs flotantes en un contenedor? Si es así, ¿cómo?

Por ejemplo, tengo una página con un div contenedor que contiene muchos divs flotados (izquierda) de tamaño variable (generados dinámicamente). Los divs se desbordan regularmente en la línea siguiente, pero nunca se centran en el contenedor div, sino que se alinean con la izquierda. Se parece a esto:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Mientras que me gustaría que los divs flotaran centrados en el contenedor de esta manera:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Gracias,

DLiKS


32
2017-07-23 11:43


origen


Respuestas:


Es posible. Utilizando http://www.pmob.co.uk/pob/centred-float.htm y http://css-discuss.incutio.com/wiki/Centering_Block_Element como fuente

Aquí hay un violín que demuestra el concepto, usando el HTML y el CSS de abajo: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

Este es el CSS mínimo necesario para el efecto:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explicación:

Comience solo con li { float: left; } regla. Luego envuelve esos flotadores en el left: 50%; relative position, entonces el borde izquierdo de la <ul>El recuadro está en el centro horizontal de la página, luego usa las reglas en #outer para ajustarlo correctamente para que el centro de #inner está alineado con la página.


23
2017-07-23 11:46



Calcule la cantidad total de ancho del espacio de la pantalla que ocupará el diseño deseado, luego haga que el elemento primario tenga el mismo ancho y aplique el margen: automático.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>


0
2017-09-05 22:10



Con CSS3 también puedes lograr esto con flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (con un poco de estilo para la visualización): https://jsfiddle.net/k5o37dff/4/

Más sobre flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Soporte del navegador: https://www.w3schools.com/cssref/css3_pr_flex.asp


0
2018-04-12 07:47



Un buen truco para centrar el elemento "div" es establecer "margen: automático", los centrará.


-6
2017-07-23 11:46



<div id='contain'><center><div id='content'>qwerty</div></center></div>

O

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;
  /* margin:auto; requires width and i think height to be defined in nearly all browsers */

  }</style>

-6
2017-07-24 00:58