CSS Center Responsive DIV

Question

"Płytki" (białe pola) widoczne na obrazku 1 reagują na ekran użytkownika. Jeśli rozmiar ekranu nie jest wystarczająco duży, pozostawia lukę po prawej stronie. Co chcę zrobić jest osiągnięcie skutku, jak widać na zdjęciu 2. Oto mój kod do tej pory dla tych konkretnych elementów ..

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

IMAGE 1:

IMAGE 2:

Answer 1

Można to zrobić z mediami zapytań, aby ustawić szerokość klasy .inner przy różnych szerokościach przeglądarki, a następnie ustawić właściwości margin-left i margin-right na auto, aby go wyśrodkować. Ustaw właściwości padding-top i padding-bottom klasy .main zamiast ustawiania górnego i dolnego marginesu na klasie .inner. Użyj kombinacji padding w klasie .inner i border w klasie .tile, aby rozstawić równomiernie płytki na siebie 10px.

Szczegółowy opis zapytaniami mediów: 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; 
} 

Ustaw zapytania mediów dla każdej szerokości okna przeglądarki, w tym przykładzie mam tylko poszedł do 800px, ale możesz dodać tyle innych, ile potrzebujesz.

CSS (ciąg dalszy)

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

Zapytania nośników są używane do ustawiania szerokości .inner wielokrotności 130px która jest szerokość .tile z obramowaniem 10px.

Jeśli chcesz zmienić odstępy pomiędzy płytkami trzeba byłoby zmieniać border na klasie .tile Z padding na klasie .inner Z margin-top i margin-bottom na klasie .main i width określonego w każdej z zapytania o media.

Answer 2

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

Dodaj text-align: center własność css http://jsfiddle.net/dolours/afKgg/

Answer 3

Można ustawić max-width dla .inner wtedy text-align: center dla .main