Centralize ul within the responsive div

Asked

Viewed 178 times

1

I have a screen that will be a Dashboard and in it I have several panels that are read with float:left so that when the screen is resized go passing the panels down getting so responsive. My problem is that I need to leave these panels centered on the page and only managed via javascript, is it possible to do only with the use of css? Below follows an image of how it is today, note that it is not centered, and if I set margins when resizing the page gets all wrong.

inserir a descrição da imagem aqui

css css3 bootstrap-3

  • The width of these "panels" is fixed or not?

  • Could you use percent width? 25% for each?

  • tag <center></center> ?

  • The width is fixed at 400px and when it is below 450px the screen ai is at 100%

  • Could I create a file in Paint (or other) of how you want to leave it? My suggestion would be similar to that suggested by @Andre Monteiro

1 answer

0

Use a parent panel to resolve this, and change the internal panels to display: 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

  • Cool André, thanks for the help, but I had already tried this way, but the designer does not accept that the boxes break in the last line have to be all aligned and only the contour div is centralized, this was the closest way I got too; Did you understand? In case it’s perfect is centering and responsive, but the boxes should be aligned below each other, the solution I’ve found so far was to create an angular directive to do this for me, however via css I could not.

Browser other questions tagged css css3 bootstrap-3

You are not signed in. Login or sign up in order to post.