How do I center align floated elements?

Question

I have a wrapper having a series of divs inside it in the form of boxes. Here are some problems that I am facing.
When I resize the window, the elements appear to be left aligned. How do I centrally align them.

Also, another problem is that the size of the divs slightly vary, which misaligns them.

Here is the 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, the question is NOT a duplicate of the above mentioned question, though the problem is (only) similar to the one presented there.

The accepted and most upvoted answer is not applicable in my case because I want the elements to automatically move to next line when the window is resized. Thanks to '@Niet the Dark Absol', The flex-wrap solution is working to center align the elements, but a slight misalignment still lies there, the red line near #13 highlights it.

Use inline-block instead of float https://jsfiddle.net/2ges6t4b/1/ — DaniP, Apr 07 '17 at 16:00
no please, my problem is different. please see the fiddle, resize the window and then notice the problem. — Ramesh Pareek, Apr 07 '17 at 16:00
Ok, so to make all elements centered, you have to remove floating from your wrapper element. What goes for different boxes being floated to next level, not floating - it's all because you didn't specify actual width. If you won't have a width you can always expect different types of misbehavior. If you need your boxes to grow in size when container is growing - use percentage, if not - have a fixed width. Also get rid of 1% padding, more small percentages you use - less neat result you will get. — Alyona, Apr 07 '17 at 16:36
try giving width and you shall laugh at the results. Also, removing float is strictly against the spirit of this question. — Ramesh Pareek, Apr 07 '17 at 16:45
@NiettheDarkAbsol, But still a slight misalignment is there if you observe the fiddle, https://jsfiddle.net/2ges6t4b/2/ for instance, Kindly note that #13's right border is slightly mis-aligned. How to fix that. — Ramesh Pareek, Apr 07 '17 at 16:48
for vary div size I recoomend add ".boxa { min-width: 85px; }" — Bruno, Apr 08 '17 at 07:10
I have moved the code which was in the question into a [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/), so it can be run on this page. Please copy the rest of your code from your JSFiddle into the question (due to copyright reasons, only you can do this). Without enough code to duplicate the problem *in the question itself*, (i.e. a [mcve]) the question is off-topic. Off-topic questions may be put on hold and closed if not [edit]ed to be on-topic. — Makyen, Apr 08 '17 at 15:57
I glad help @RameshPareek - Q and what or where is your next question? — Bruno, Apr 09 '17 at 21:42
@BrunoBG, I am talking about this very question. Your technique worked, now please convert your comment into an answer. :) — Ramesh Pareek, Apr 10 '17 at 16:22
OK @RameshPareek here you are, I'll wait for your upvote. :-) — Bruno, Apr 10 '17 at 17:53

score 1 · Accepted Answer · answered Apr 10 '17 at 17:09

1

For your vary div size "red line aligment" I recommend add:

.boxa { 
    min-width: 85px;
}

answered Apr 10 '17 at 17:09

Bruno

6,623
5
41
47

score 0 · Answer 2 · answered Apr 08 '17 at 07:10

0

Using this without float:left code I found okay from my PC And browser !

.left_wrapper       
  {            
    max-width: 70%;
    margin:0 auto;
 }

answered Apr 08 '17 at 07:10

Momin

3,200
3
30
48

How do I center align floated elements?

2 Answers2