的CSS盒子中心像iOS主屏幕

Question

我如何得到這個結果沒有最後一個項目行：

margin-right: 30px; 

在CSS

，現在我用：

margin-right:             30px; 
margin-bottom:             30px; 

它應該像IOS主屏幕

http://www4.picturepush.com/photo/a/12640862/img/12640862.png http://www3.picturepush.com/photo/a/12640866/img/12640866.png

HTML：

<div class="home-main"> 
     <a href="t1home" class="item"><h1>Hallo</h1></a> 
     <a href="t1home" class="item"><h1>Hallo</h1></a> 
     <a href="t1home" class="item"><h1>Hallo</h1></a> 
     <a href="t1home" class="item"><h1>Hallo</h1></a> 
</div> 

CSS：

.home-main { 
    width:               90%; 
    max-width:              960px; 
    min-height:              100px; 
    margin:               0 auto; 
    overflow:              hidden; 
    text-align: center; 
} 
.home-main a { 
    width:               126px; 
    min-height:              126px; 
    max-height:              166px; 
    margin-right:             30px; 
    margin-bottom:             30px; 
    background-color:            #777; 
    float:               left; 
    color:               #fff; 
    text-decoration:            none; 
} 
.home-main a:nth-last-child(1){ 
    margin-right:             0; 
} 
.home-main a h1 { 
    width:               100%; 
    height:               33px; 
    margin:               0; 
    margin-top:              126px; 
    padding-top:             7px; 
    font-size:              19px; 
    text-align:              center; 
    background-color:            #222; 
} 
@media screen and (width:320px){ 
    .home-main a:nth-child(even) { 
     margin-right:            0; 
    } 
} 

Answer 1

我將展示一些與JavaScript的完成，因爲這是默認的iOS上。我只使用jQuery來切換文檔的就緒狀態，但您也可以將其添加到body標籤。之後，你將不需要jQuery本身。

我正在用JavaScript做的事情是在left-padding的基礎上增加額外的空間的剩餘部分，仍然打開，所以它會推動浮動到水平中間。

如果JavaScript是一個問題，我會刪除答案。

這裏是JSfiddle

HTML

<div id="wrapper"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="floatClear"></div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

#wrapper { 
    width: 90%; 
    border: 1px solid red; 
    padding: 5px; 
} 

.block { 
    width: 130px; 
    height: 170px; 
    background-color: grey; 
    float: left; 
    margin: 5px 5px 5px 5px; 
} 

.floatClear { 
    clear: both; 
} 

的JavaScript

$(document).ready(function() { 
    var wrapper = document.getElementById('wrapper'); 

    var wrap_w = wrapper.offsetWidth - (5*2); // minus padding 
    var block_w = wrapper.getElementsByTagName('div')[0].offsetWidth + (5*2); // plus margin 

    var remainder = wrap_w % block_w; 
    var left_add = Math.floor(remainder/2); // what to add left 

    wrapper.style.paddingLeft = (left_add + 5) + 'px'; 

    //console.log(remainder); 
}); 

祝你好運！