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.
.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.
for vary div size "red line aligment" recommend add:
.boxa { min-width: 85px; }
Comments
Post a Comment