使用CSS / JQUERY / HTML集中多个响应分区

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居中，同时保持响应。基本上，当用户调整窗口时，它必须始终保持居中（同一行中最可能的图像）。

  

注意：这是针对Drupal中的一个块。

Answer 1

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

<强> E.g。

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

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

<强> E.g。

.apoios {
    text-align: center;
}

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

这里是JsFiddle link。

希望它有所帮助。

Answer 2

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

＆＃13;

＆＃13;

window.addEventListener('resize', function(event) {
    resize();
}, false);

function resize() {
    var lhalf = ($(window).width() - 700) / 2;
    var thalf = ($(window).height() - 550) / 2;
    $('.apoios').css('left', lhalf);
    $('.apoios').css('top', thalf);
}

resize();

＆＃13;

.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;
}
.apoios {
    position: absolute;
    height: 550px;
    width: 700px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
    <div class="thunnb">
        <img alt="" src="http://placehold.it/150x150" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;