html - How do I center align floated elements? -


i have wrapper having series of divs inside in form of boxes. here problems facing.
when resize window, elements appear left aligned. how centrally align them.

also, problem size of divs vary, misaligns them.

here fiddle

.left_wrapper        {                 max-width: 70%;     margin:0 auto;     float:left; }   .boxa     {     background-color: #45e645;     display:inline;     position:relative;     left:4%;     float:left;     margin: 1% 1%;     padding:1%;     font-size: 85px;     text-align:center;     border:1px solid green;  }     <div class="left_wrapper" id="roll_nos">     <div id="box" class="boxa">01</div>     <div id="box" class="boxa">02</div>     <div id="box" class="boxa">03</div>     <div id="box" class="boxa">04</div>      .............      .............      .............      .............  </div> 

as suggested, question not duplicate of above mentioned question, though problem (only) similar 1 presented there.

the accepted , upvoted answer not applicable in case because want elements automatically move next line when window resized. '@niet dark absol', flex-wrap solution working center align elements, slight misalignment still lies there, red line near #13 highlights it.please note red line far <code>13</code>.

for vary div size "red line aligment" recommend add:

.boxa {      min-width: 85px; } 

Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -