«Центр слева» выровнять по css

Question

Будет сложно объяснить, что я хочу, поэтому я покажу анимированный gif результата, который я хочу (сделанный в Photoshop), и моего кода в jsFiddle того, что происходит.

Как вы можете видеть, когда синий размер коробки не достаточно, чтобы уместить все элементы в одном ряду, 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 внутри внешней коробки и элементов линии связи с использованием поплавка слева) без успеха.

Есть ли способ сделать это без javascript?
Вот мой код в jsFiddle.

PS. Английский не мой родной язык '-'.

Answer 1

со шлейфом или встроенным блоком , вы можете использовать псевдо 1px высоты и ширину 2 коробок + их поля.

Это будет как фи коробки, заполняя целиком вторую линию и падение в качестве третьей линии:

.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

Во-первых, мне нравится, как вы представили свою проблему. Nice images :-)

Я не думаю, что вы можете делать то, что хотите, без дополнительного элемента. Добавление элемента встроенного блока, который перенастраивает выравнивание, будет делать то, что вы хотите.

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

См https://jsfiddle.net/qgcz0ax4/

Answer 3

Каждый из этих дивы выступать в качестве текста из-за <a> тегов. Просто установите выравнивания текста влево для Космических коробков - если вы хотите, чтобы каждый из див иметь выравнивание по центру листа текста, создать класс и дать этот класс для всех 4 ребенка DIVS

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