How can I centralize 5 divs without using margin-left?

Question

I'm trying to get 5 divs aligned inside a div, like this:

Is there any way to do this without using margin-left?

I mean.. In case I want to eliminate one of this middle divs and they still be aligned? For example.. If I remove div4, the others will be centered automatically. Like this:

I found a solution like this:

#parent {
  width: 615px;
  border: solid 1px #aaa;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.child {
  width: 100px;
  weight: 100px;
  border: solid 1px #ccc;
  display: inline-block;
  vertical-align: middle;
}

But the problem is: The first div and the last one must be like float left and float right... And this solution centers every thing resulting something like this:

Answer 1

The flexbox might be the answer you're looking for.

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  width: 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

If you want to maximise browser compatibility, be sure to also add the correct vendor prefixes:

#container {
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  /* … */
}

Answer 2

maybe so

text-align: justify - this feature works with text, as well as our line-block (display: inline-block) points, in fact, and are inseparable words in a row, this behavior is quite natural.

Incidentally, it is worth considering that the text-align: justify inherited property, so text-align: left at the next descendants - a necessary measure. In this way, we would return as the alignment of the content of our blocks in the former state.

This algorithm does not apply to the last line, and works with all lines except her.Therefore, using :after I added to the end of another element, pacifier, and stretched it to 100% of the width, thus forcing him to stretch out on the very last line in the list.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {    
    text-align: justify; 
    font-size: 0;
}
div:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content:'';
    display: inline-block;
}
div > div {
    background: #E76D13;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;    
    line-height: normal;
    font-size: 14px;
    vertical-align: top;    
}

<div>
    <div>1</div>
   <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

Answer 3

If you only need to support modern browsers, you can utilize the flexible box layout.

    .parent{
        display:flex;
        justify-content:space-between;
        width: 815px;
        border: solid 1px #aaa;
    }

    .child {
        background-color:yellow;
        width: 100px;
        height: 100px;
        border: solid 1px #ccc;
    }

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>  
    </div>

Read more about the flexible layout here

To know if your browser supports flexible layout

Answer 4

I know there is already an answer, but for future users I want to make sure they see the correct way to use flexbox. Prefixes are mandatory to use it correctly and responsibly. Without them you will not support IE10, anything before android 4.1 and anything before iOS7. So be careful because flexbox does not degrade well.

Here is a great article on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is a great site to check browser compatability: http://caniuse.com/#feat=flexbox

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  flex: 0 0 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

/* The order of these prefixed properties is very important!!!  */

#container {
  display: -webkit-box;                       /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;                          /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;                       /* TWEENER - IE 10 */
  display: -webkit-flex;                      /* NEW - Chrome */
  display: flex;                              /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-justify-content:space-between;      /*Chrome */
  justify-content: space-between;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 1px solid black;
  background: #ccc;
}
#container>div {
    -webkit-box-flex: 0 0 100px;                /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 0 100px;                     /* OLD - Firefox 19- */
  width: 20%;                                   /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 0 100px;                      /* Chrome */
  -ms-flex: 0 0 100px;                          /* IE 10 */
  flex: 0 0 100px;                              /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

Answer 5

You can use margin left but make the first child element have zero margin using css selectors.

    div *{
        display:inline-block;
        /*
        * set your child elements to a set width. If you want them to change
        * size you can use % for the width and adjust this using @media
        */
        margin-left:20px;//use % if you want it to scale.
    }

    div:first-child { 
        margin-left:0px;
    }

<div>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
<div>

all the elements will have margin left of 20px except the first one. This will give you a flush line on the left div.

If you don't want the elements to overflow to the next line you can set the parent element to have overflow-x none. And select different widths for the child elements. Bootstrap uses margins and inline-block when it places multiple elements side by side. If you look at bootstrap themes when there placed on a phone the elements switch over to a stack.

see the following link for more about css selectors. http://www.w3schools.com/cssref/sel_firstchild.asp