I have a screen that will be a dashboard and in it I have several panels that are li with float: left so that when the screen is resized, go passing the panels down and thus be responsive. My problem is that I need to leave these panels centered on the page and I only managed via javascript, how can I do it with css? Below is an image of how it is today, notice that it is not centralized, and if I set the margins when I resize the page it is all wrong.
Use a parent panel to resolve this, and change the internal display panels: inline-block;
.painel{
height:150px;
width:220px;
display:inline-block;
background-color:#fff;
margin:5px;
}
#painelPai{
margin:auto;
float: left;
background-color: red;
text-align:center;
width:100%;
}<div id="painelPai">
<div class="painel">Painel1</div>
<div class="painel">Painel2</div>
<div class="painel">Painel3</div>
<div class="painel">Painel4</div>
<div class="painel">Painel5</div>
<div class="painel">Painel6</div>
<div class="painel">Painel7</div>
<div class="painel">Painel8</div>
</div>Follow the example: Example