Question

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

一个。一个图像 B.与图像有关的文本。

当屏幕宽度缩小时，这些列应逐一折叠;当屏幕扩展时，以及彼此相邻的最多4列扩展。当所有列都在彼此之下折叠时（在移动版屏幕宽度下），列应该在屏幕中居中，而不是刷新到屏幕的右侧/左侧。

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

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。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在css中垂直居中四个响应列

1 个答案: