Centre Multiple Responsive Divs Using CSS / JQUERY / HTML

问题

I'm new to html and css and I'm trying to create a website, part of the code is here:

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/

I want to centre the "thunnb" divs while maintaining it responsive. Basically it must stay centred (with the most possible images in the same row) all the time while the user is adapting the window.

Note: This is for a block in Drupal.

回答1:

Change float: left; to display: inline-block; in thunnb class.

E.g.

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

Then add text-align: center; in apoios class.

E.g.

.apoios {
    text-align: center;
}

You can now remove the display: inline-block; in apoios class.

Here's the JsFiddle link.

Hope it helps.

回答2:

Try locking the size of the grid in a div, then forcing its position to stay absolute center with jQuery:

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();

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

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

来源：https://stackoverflow.com/questions/31151365/centre-multiple-responsive-divs-using-css-jquery-html