CSS Merkezi Duyarlı DIV

Question

Resim 1'de gördüğünüz "fayans" (beyaz kutular) kullanıcı ekranına duyarlı. Ekran boyutu yeterince büyük değilse, sağ tarafta bir boşluk bırakır.

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

görüntüde 2. görüldüğü gibi Ne yapmak istiyorum .. İşte benim kod şimdiye kadar bu özel elemanlar içindir sonucu elde

HTML'dir

RESİM 1:

GÖRÜNTÜ 2:

Answer 1

için text-align: center sahip .inner için max-width ayarlayabilirsiniz çeşitli tarayıcı genişliklerinde .inner sınıfının genişliğini ayarlamak için sorgular, daha sonra margin-left ve margin-right özellikleriniolarak ayarlayın.ortalamak için. .inner sınıfında üst ve alt kenar boşluklarını ayarlamak yerine .main sınıfının padding-top ve padding-bottom özelliklerini ayarlayın. .inner sınıfında ve .tile sınıfında border sınıfını kullanarak karoları eşit olarak 10px birbirinden ayırın. medya sorguları detaylı açıklaması için

: CSS media queries

example

css

her tarayıcı genişliği için bir medya sorgusu, bu örnekte sadece 800px kadar gitmiş Set

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

, ama ihtiyacınız kadar daha fazlasını ekleyebilirsiniz. (Devamı)

CSS

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

medya sorguları 10px bir sınır olan bir .tile genişliği 130px 'lik bir çarpana .inner genişliğini ayarlamak için kullanılır.

Eğer fayans arasındaki boşluğu değiştirmek isterseniz .tile sınıfına border, .inner sınıfına padding, margin-top ve margin-bottom.main sınıfına ve her birinde belirtilen width değiştirmek gerekir medya sorguları.

Answer 2

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

text-align ekleyin: merkez css özelliği http://jsfiddle.net/dolours/afKgg/

Answer 3

Ardından Medyaya ile yapabilirsiniz .main