How do I center left-floated elements?

Question

I have a container of various width, and various number of boxes float inside it. All the boxes have same width and height.

This is a demonstration. https://jsfiddle.net/kghvmjb6/1/

I am looking for pure CSS solution if possible. Otherwise pure javascript (no jQuery) and CSS solutions are fine.

This example works fine with one line of floating boxes but fail with multiple lines, which is not I want. https://codepen.io/alexandredees/pen/ojaFr

This is possible with pure CSS - but you have to use a bunch of media queries: http://stackoverflow.com/a/21245751/703717 — Danield, Jul 13 '16 at 09:16

score 0 · Answer 1 · answered Jul 13 '16 at 08:46

0

Instead of using float left, use display inline-block and in the parent div add text-align center, that will center the boxes in the container

Modified Fiddle

HTML

<div class="container">
 <div class="">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="clear"></div>
 </div>
</div>

CSS

.container {
   border: 1px solid red;
   width: 480px; text-align:center;
 }

  .container.wider {
    width: 530px;
  }

 .box {
   float: none;
   width: 80px;
   height: 80px;
   margin: 10px;
   background-color: #ddd;
   display:inline-block;
   }

answered Jul 13 '16 at 08:46

Sanjeev Kumar

3,113
5
36
77

This will not work as I want. If I have total 6 boxes with 4 boxes in line 1 and 2 boxes in line 2, I want box 5 and 6 place right under box 1 and 2 – wdetac Jul 13 '16 at 08:51
Use float left and set margin from left right to adjust this. – Sanjeev Kumar Jul 13 '16 at 08:53
How do I set correct margins? The width of the container is unknown. – wdetac Jul 13 '16 at 08:57

How do I center left-floated elements?

1 Answers1