Горизонтально центрирующие divs изменяющихся чисел

Question

Так что я пытаюсь сделать страницу с несколькими широкими div, которые укладываются вертикально вниз по странице. Внутри каждого div есть ряд других div, которые я пытаюсь сосредоточить и распределить по горизонтали. Проблема заключается в том, что не все родительские divs будут иметь одинаковое количество распределенных по горизонтали divs внутри них, например. у некоторых есть 3 и некоторые 4. Я хочу иметь эти меньшие divs, сгруппированные рядом друг с другом, с тем же объемом пространства по обе стороны группы. Вот мой код:

#prod-container { 
 
    max-width: 920px; 
 
    margin: 26px auto 0px auto; 
 
    background-color: #000066; 
 
} 
 
.prod-mod { 
 
    width: 225px; 
 
    /*border:1px solid #EDEDED;*/ 
 
    display: inline-block; 
 
}

<div id="prod-container"> 
 
    <h2 class="cls-title">Classic West Coast® 11.6</h2> 
 
    <div class="prod-mod"> 
 
    <img src="img.jpg"> 
 
    <p class="cls-subtitle">Traditional Rowing Model</p> 
 
    </div> 
 
    <div class="prod-mod"> 
 
    <img src="img.jpg"> 
 
    <p class="cls-subtitle">Slide Seat Sculling Model</p> 
 
    </div> 
 
    <div class="prod-mod"> 
 
    <img src="img.jpg"> 
 
    <p class="cls-subtitle">Sailing Model</p> 
 
    </div> 
 
    <div class="prod-mod"> 
 
    <img src="img.jpg"> 
 
    <p class="cls-subtitle">Lifeguard Boat</p> 
 
    </div> 
 
</div>

Это пример, содержащий 4 дивы, но будут другие с только 3. Как мне это сделать?

Answer 1

Похоже, вы ищете модель flex дисплея, а именно с justify-content: space-around;:

div { 
 
    background: tomato; 
 
    padding: 10px; 
 
    width: 400px; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 
div div { 
 
    text-align: center; 
 
    width: 30px; 
 
    background: beige; 
 
}

<div> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div> 
 
<hr> 
 
<div> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>