Alineando un flotador: ¿div izquierdo al centro?

96

Quiero que un grupo de imágenes se muestre horizontalmente en la página. Cada imagen tiene algunos enlaces debajo, así que necesito poner un contenedor alrededor de cada imagen / grupo de enlaces.

Lo más cerca que he estado de lo que quiero es ponerlos en divs que flotan: left. El problema es que quiero que los contenedores se alineen en el centro y no a la izquierda. Cómo puedo conseguir esto.

html css Miguel
fuente

Respuestas:

216

usar en display:inline-block;lugar de flotar

no puede centrar los flotadores, pero los bloques en línea se centran como si fueran texto, por lo que en el contenedor general exterior de su "fila", establecería text-align: center;entonces para cada contenedor de imagen / título (son los que serían inline-block;) puede volver a -alinee el texto a la izquierda si lo necesita

Clairesuzy
fuente
3
En caso de que alguien tenga problemas con los espacios que aparecen entre los elementos, elimine el espacio en blanco en su código definiendo sus elementos como '<img> </img> <img> </img>' o '<img> < / img> <! - Comentario -> <img> </img> '.
Maarten
1
O configure el elemento padre font-size:0y restaure en el hijo. O usar letter-spacing:-.31emen el padre y letter-spacing:0en el niño.
Mike Causer
@Baumr Use flexbox en su lugar. Hay un ejemplo a continuación .
Jan Derk
3
es posible que deba agregar vertical-align:middlemientras usa display:inline-block.
ibsenv
47

CSS Flexbox está bien soportado en estos días. Vaya aquí para obtener un buen tutorial sobre flexbox.

Esto funciona bien en todos los navegadores más nuevos:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}
<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>
Expandir fragmento

Algunos pueden preguntar por qué no usar display: inline-block? Para cosas simples, está bien, pero si tiene un código complejo dentro de los bloques, es posible que el diseño ya no esté centrado correctamente. Flexbox es más estable que el flotador izquierdo.

Jan Derk
fuente
Esto funciona para centrar horizontalmente. ¿Qué tal si también se centra verticalmente?
Cullub
Para centrar verticalmente, dé al contenedor una altura (por ejemplo, altura: 500px;) y agregue align-items: center;
Jan Derk
9

pruébalo así:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>
Lauw
fuente
9

Simplemente envuelva los elementos flotantes en a <div>y dele este CSS:

.wrapper {

display: table;
margin: auto;

}
buenos píxeles
fuente
1

Quizás esto es lo que estás buscando: https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>
Shaq
fuente
0 
.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}
Teoman shipahi
fuente