html - 在CSS中将四个响应列垂直居中

我正在尝试在CSS中创建4列布局。每列宽度相同，并包含：

A.图片
B.与图片有关的文字。

随着屏幕宽度的缩小，这些列应一一折叠。以及在屏幕扩展时最多可扩展到彼此相邻的4列。当所有列都相互折叠（在移动版本的屏幕宽度下）时，这些列应位于屏幕中央，而不是冲洗到屏幕的右侧/左侧。

以下代码片段显示了到目前为止的内容：

<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>


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

最佳答案

如果媒体查询无济于事，只需将.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>