「Center left」與css對齊

Question

難以解釋我想要什麼，所以我會展示我想要的結果（在Photoshop中製作）和我的代碼在js中的動畫gif發生了​​什麼。

正如你可以看到，當藍框的大小是不夠的，適合在一排的所有項目中，4º項目被移動到第二行（如預期），但而不是在對齊中心，他左對齊。

我的CSS代碼

.outer-box 
{ 
    background: #00cc99; 
    width: 100%; 
    max-width: 800px; 
    font-size: 0; 
    text-align: center; 
    padding: 10px; 
} 

.outer-box a 
{ 
    display: inline-block; 
    width: 120px; 
    height: 80px; 
    padding: 10px; 
    background: #ff5050; 
    font-size: 12px; 
} 

.outer-box a:hover 
{ 
    background: #990000; 
} 

.outer-box a div 
{ 
    background: #99ccff; 
    width: 100%; 
    height: 100%; 
} 

我的HTML

<div class="outer-box"> 
    <a href="#"><div>I put image and text here</div></a> 
    <a href="#"><div>I put image and text here</div></a> 
    <a href="#"><div>I put image and text here</div></a> 
    <a href="#"><div>I put image and text here</div></a> 
</div> 

我的結果

我的預期結果

我試圖用浮動的div（外箱內一個DIV和使用浮動左邊的鏈接元素），但沒有成功發揮。

有沒有辦法做到這一點，沒有JavaScript？
這是我的代碼jsFiddle。

PS。英語不是我的母語' - '。

Answer 1

與彎曲或內嵌塊，您可以使用1px高度的僞和2個框的寬度+邊距。

它會像一個FITH盒，填充完全在第二線路和降作爲第三行：

.outer-box { 
 
    background: #00cc99; 
 
    width: 100%; 
 
    max-width: 800px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    margin: auto; 
 
    font-size: 0; 
 
    padding: 10px; 
 
} 
 

 
.outer-box:after { 
 
    content: ''; 
 
    max-height: 1px; 
 
    width: 320px 
 
} 
 

 
.outer-box a { 
 
    display: block; 
 
    width: 120px; 
 
    height: 80px; 
 
    padding: 10px; 
 
    background: #ff5050; 
 
    font-size: 12px; 
 
    margin: 5px 10px; 
 
} 
 

 
.outer-box a:hover { 
 
    background: #990000; 
 
} 
 

 
.outer-box a div { 
 
    background: #99ccff; 
 
    height: 100%; 
 
}

<h1> USE full page mode then resize window broser </h1> 
 
<div class="outer-box"> 
 
    <a href="#"><div>I put image and text here</div></a> 
 
    <a href="#"><div>I put image and text here</div></a> 
 
    <a href="#"><div>I put image and text here</div></a> 
 
    <a href="#"><div>I put image and text here</div></a> 
 
</div>

Inline-block version to play with

Answer 2

首先，我喜歡你提出問題的方式。不錯的圖片:-)

我不認爲你可以做你想要的東西，沒有額外的元素。添加一個重新調整對齊的內聯塊元素將做你想要的。

.inner-box { 
    text-align: left; 
    display: inline-block; 
} 

見https://jsfiddle.net/qgcz0ax4/

Answer 3

每這些div的作爲文本由於<a>標籤。只需設置文本左對齊的.outer箱 - 如果你希望每個申報單的有中心對齊文本，創建一個類，並給該類所有4孩子的div

.outer-box 
{ 
    background: #00cc99; 
    width: 100%; 
    max-width: 800px; 
    font-size: 0; 
    text-align: left; 
    padding: 10px; 
}