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

     &a

Solution 1:

Changefloat: 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.

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

functionresize() {
    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;
}
.apoiosimg {
    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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="apoios"><h7>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apoios</h7><br><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div><divclass="thunnb"><imgalt=""src="http://placehold.it/150x150" /></div></div>

Share