jquery - 使用 CSS/JQUERY/HTML 居中多个响应式 Div

Question

我是 html 和 css 新手，我正在尝试创建一个网站，部分代码在这里:

HTML

<div class="apoios">
<h7>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apoios</h7>
<br>
<div class="thunnb">
    <img alt="" src="http://placehold.it/150x150" />
</div>
(...)
<div class="thunnb">
    <img alt="" src="http://placehold.it/150x150" />
</div>

CSS

.thunnb {
float: left;
padding: 10px;
width: 150px;
height: 150px;
}
.apoios img {
    border:1px solid #;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
h7 {
    font-size:22px !important;
    font-family:'Raleway', sans-serif !important;
    font-weight: normal !important;
    margin-bottom:6px !important;
    color: #FFFFFF !important;
    margin-top: 20px;
}
.apoio {
    display: inline-block;
}

JSFIDDLE - https://jsfiddle.net/wpswddnq/

我想将“thunnb”div 居中，同时保持其响应能力。基本上，当用户调整窗口时，它必须始终保持居中(最可能的图像位于同一行)。

Note: This is for a block in Drupal.

Answer 1

在 thunnb 类中将 float: left; 更改为 display: inline-block;。

例如

.thunnb {
    display: inline-block;
    padding: 10px;
    width: 150px;
    height: 150px;
}

然后在apoios类中添加text-align: center;。

例如

.apoios {
    text-align: center;
}

您现在可以删除 apoios 类中的 display: inline-block;。

这是 JsFiddle link .

希望有帮助。