How to horizontally center a responsive div with multiple objects inside

Question

How to horizontally center a responsive div with multiple objects inside

Navigation

#1 by (2 votes)

0

I'd like to put the maximum of Rectangle possible within mainDiv , and then center mainDiv horizontally. For example, in this image we can see eight Rectangle within mainDiv , but there is a space on the right side, I would like to center mainDiv , to leave the same margin on the right side and on the left side

<div id="mainDiv" >
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
    <div id="Rectangle" style="width: 200px; height: 300px; background: #4d5f8d; margin-left: 20px; margin-top: 30px; float: left;"></div>
</div>

css

asked by anonymous 05.04.2017 / 05:35

1 answer

Would you like to add a parameter in: system ("color", var) in C language? Select some data from different tables

score 2 · Accepted Answer

Would that be?

.Rectangle {
  width: 200px; 
  height: 200px;
  background: #4d5f8d; 
  margin-left: 20px; 
  padding: 10px;
  margin-top:10px;
  }
  .mainDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

<div class="mainDiv" >
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
    <div class="Rectangle" ></div>
</div>

When you reach the limit of the resize the element goes down, thus keeping the elements centralized