Centro CSS Responsive DIV

Question

Le "tessere" (caselle bianche) che vedete nell'immagine 1 sono sensibili allo schermo degli utenti. Se le dimensioni dello schermo non sono abbastanza grandi, lascia una fessura sul lato destro. Quello che voglio fare è ottenere il risultato come si vede nell'immagine 2. Ecco il mio codice finora per quegli elementi specifici ..

HTML:

<div class="main"> 
    <div class="inner"> 
     <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div> 
    </div> 
</div> 

CSS:

.main{ 
    width:100%; 
    background: #000; 
} 

.main .inner{ 
    margin:10px; 
    min-width: 140px; 
    background: red; 
} 

.main .inner .tile{ 
    margin:10px; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

IMMAGINE 1:

Immagine 2:

Answer 1

Si può fare questo con i media query per impostare la larghezza della classe .inner a varie larghezze del browser, quindi impostare le proprietà margin-left e margin-right su auto per centrarlo. Impostare le proprietà padding-top e padding-bottom della classe .main anziché impostare i margini superiore e inferiore sulla classe .inner. Utilizzare una combinazione di padding nella classe .inner e border nella classe .tile per liberare le tessere uniformemente a 10px.

Per una descrizione dettagliata delle media query: CSS media queries

example

css

.main{ 
    width: 100%; 
    background: #000; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.main .inner{ 
    padding: 5px; 
    font-size: 0px; 
    display: table; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: red; 
} 

.main .inner .tile{ 
    margin: 0px; 
    padding: 0px; 
    border: 5px solid red; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

Impostare una media query per ogni larghezza del browser, in questo esempio sono andato solo fino a 800px, ma puoi aggiungerne tante quante ne hai bisogno.

css (continua)

@media (min-width: 280px) { 
    .main .inner{ 
     width: 130px; 
    } 
} 

@media (min-width: 320px) { 
    .main .inner{ 
     width: 260px; 
    } 
} 

@media (min-width: 480px) { 
    .main .inner{ 
     width: 390px; 
    } 
} 

@media (min-width: 640px) { 
    .main .inner{ 
     width: 520px; 
    } 
} 

@media (min-width: 800px) { 
    .main .inner{ 
     width: 780px; 
    } 
} 

Le query supporti vengono utilizzati per impostare la larghezza di .inner ad un multiplo di 130px che è la larghezza di una .tile con un bordo di 10px.

Se si vuole modificare la spaziatura tra le piastrelle si avrebbe bisogno di modificare il border sulla classe .tile, il padding sulla classe .inner, il margin-top e margin-bottom sulla classe .main e la width specificato in ciascuna delle le domande dei media.

Answer 2

.main .inner{ 
    min-width: 140px; 
    background: red; 
    text-align:center; 
    } 

Aggiungi text-align: center proprietà CSS http://jsfiddle.net/dolours/afKgg/

Answer 3

È possibile impostare max-width per .inner poi text-align: center per .main