使用CSS/JQUERY/HTML将多个响应div置于中心

我不熟悉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>

JSFIDDLE-

我想让“thunnb”潜水艇居中，同时保持灵敏。基本上，当用户调整窗口时，它必须始终保持居中（最可能的图像在同一行中）

注意：这适用于Drupal中的块

---

更改

浮动：左至
显示：内联块在
thunnb
类中

例如

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

.apoios {
    text-align: center;
}

然后添加
文本对齐：居中在
apios
类中

例如

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

.apoios {
    text-align: center;
}

现在可以删除
display:inline块在
apios
类中

这是最新消息。

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

.apoios {
    text-align: center;
}

希望有帮助。
尝试在div中锁定网格的大小，然后使用jQuery强制其位置保持绝对中心：


window.addEventListener（'resize'，函数（事件）{
调整大小（）；
}，假）；
函数resize（）{
var lhalf=（$（窗口）.width（）-700）/2；
var thalf=（$（窗口）.height（）-550）/2；
$（'apoios'）.css（'left'，lhalf）；
$（'.apios'）.css（'top'，thalf）；
}
调整大小（）
.thunnb{
浮动：左；
填充：10px；
宽度：150px；
高度：150像素；
}
apoios先生{
边框：1px实心#；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
}
h7{
字体大小：22px！重要；
字体系列：'Raleway'，无衬线！重要；
字体大小：正常！重要；
保证金底部：6px！重要；
颜色：#FFFFFF！重要；
边缘顶部：20px；
}
阿皮欧斯先生{
位置：绝对位置；
高度：550px；
宽度：700px；
}

Apoios


它不再响应，阿尔贝托的答案也起作用了！非常感谢。anyway@AlbertoI.N.J. 嘿，我也有同样的问题：我想保持图像的响应性和高宽比，但我希望它们居中。我以前试过你说的话，但似乎不管用@magamig我刚检查了你的JSFIDLE链接。首先，您没有将
noticias
类指定为class，而是将其指定为
标记
。您需要添加
以将其声明为类。例如，
.noticias
。其次，
center
的拼写为
center
，它不是有效的
text align
属性值。我更新了你的JSFIDLE。以下是链接：。希望能有帮助。@AlbertoI.N.J。有没有办法缩小左右两边的间距？再次感谢你的帮助@megamig那么，你想拉伸图像吗？@AlbertoI.N.J。没关系，在drupal区，它的工作方式应该是这样的！再次感谢您，并为我的错误道歉：p