que - justificar texto html

Alineación de un flotador: left div to center?

Question

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

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

Answer 1

Estamos viviendo en 2018 ahora y CSS Flexbox tiene un buen soporte . Vaya aquí para obtener un buen tutorial sobre flexbox.

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

#container {
  display:                 flex;
  display:                 -webkit-flex; /* Safari 8 */
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;         /* Safari 8 */
  justify-content:         center;
  -webkit-justify-content: center;       /* Safari 8 */
}

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

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

Answer 2

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>

Answer 3

Simplemente envuelva elementos flotados en un <div> y asígnele este CSS:

.wrapper {

display: table;
margin: auto;

}

Answer 4

display:inline-block; uso display:inline-block; en lugar de flotar

no puede centrar flotantes, sino que los bloques en línea se centran como si fueran texto, por lo que en el contenedor general exterior de su "fila" - usted establecería text-align: center; luego, para cada contenedor de imagen / leyenda (es lo que sería un inline-block; ) puede volver a alinear el texto a la izquierda si necesita

Answer 5

.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;
}