Подстроки Div в CSS

Question

Я хотел бы иметь выравнивание, как на картинке, на основе количества поддисков, используя CSS/HTML и Bootstrap.

1. Полная ширина может вместить до 3 дивы (т.е. .container)
2. Если только 2 дивы показаны они должны быть выровнены в центре.

На данный момент все divs будут выравниваться влево или вправо.

Что было бы простым способом добиться этого с помощью CSS/HTML? Не уверен, какие ключевые слова я должен искать в Google об этом - так как есть много статей, посвященных центрированию div.

Answer 1

Установите ваш div в inline-block и ваша обертка для text-align: center:

.wrapper { text-align: center; } 
 
.wrapper div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    display: inline-block; 
 
    margin: 20px; 
 
}

<div class ="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

С этим CSS, положить дивы как так (поплавки первый):

<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="center"></div> 
</div> 

P.S. Вы также можете плавать вправо, затем влево, затем в центр. Важно то, что поплавки проходят до «центральной» центральной секции

P.P.S. Вы часто хотите, чтобы последний внутри #container этот фрагмент: <div style="clear:both;"></div>, который будет растягивать #контейнер вертикально, чтобы содержать обе боковые поплавки, а не поднимать его высоту только от #center и, возможно, позволять сторонам выступать снизу.