• Home page
  • Knowlwedge Base
  • Come centrare in un contenitore una serie di div affiancati che possono essere aggiunti dinamicamente.

Dettaglio Knowledge Base

Come centrare in un contenitore una serie di div affiancati che possono essere aggiunti dinamicamente.

quando vogliamo affiancare dei <div> utilizziamo la proprietà "display:float-left" otteniamo il risultato desiderato ma questi div vengono allineati all'interno del <div> contenitore a sinistra. Se li vogliamo centrare siamo costretti a impostare il "margin-left" del primo div o il "padding" del contenitore.

Se però i <div> all'interno del contenitore variano oppure se il contenitore può variare la sua dimensione (leggi design responsive) allora dobbiamo trovare una soluzione.

La soluzione è semplice da implementare: basta utitlizzare nel div container la proprietà "display:flex"

HTML

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
</div>

CSS

html { height: 100%; }

body {     
    height: 100%;
    background-color: yellow;    
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    max-width: 400px;
    height: 100%;
    margin: auto;
}

.box {
    height: 50px;
    width: 75px;
    margin: 10px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}