Вертикально центрируйте четыре чувствительных столбца в css

Question

Я пытаюсь создать 4-х столбцовый макет в CSS. Каждая колонка имеет одинаковую ширину и содержит:

A. a image B. текст, относящийся к изображению.

Эти столбцы должны разрушаться друг под другом по мере уменьшения ширины экрана; а также расширять до четырех столбцов рядом друг с другом, когда экран расширяется. Когда все столбцы обрушиваются друг на друга (при ширине экрана мобильной версии), столбцы должны быть центрированы на экране, а не краснеться вправо/влево на экране.

Следующий фрагмент кода показывает, что я до сих пор:

HTML

<div class="sections"> 
    <div> 
     <img src="http://placehold.it/110x110"/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div> 
     <img src="http://placehold.it/110x110"/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div> 
     <img src="http://placehold.it/110x110"/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
    <div> 
     <img src="http://placehold.it/110x110"/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div> 

CSS

.sections { display: table; margin: 0 auto; } 
.sections div { text-align: center; width: 20em; padding: 0 0.5em 1em 0; display: table-cell; vertical-align: center; } 

Я знаю, что очень близко к где мне нужно быть, но там должно быть быть тем, что я не настраиваю правильно, и я ломаю себе голову над этим, любая помощь очень ценится!

Answer 1

Если медиа-запросы не помогут вам просто изменить .sections div показать значение свойства inline-block.

.sections { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 
.sections div { 
 
    text-align: center; 
 
    width: 20em; 
 
    padding: 0 0.5em 1em 0; 
 
    display: inline-block; /* Thats all you need */ 
 
    vertical-align: middle; 
 
}

<div class="sections"> 
 
    <div> 
 
    <img src="http://placehold.it/110x110" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/110x110" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/110x110" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/110x110" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>