Make elements center align to each other using only css


align viewer


The below code works even if you add items dynamically. It adjusts automatically and views all the items align equal to each other

HTML


    <div class="parent">
        <div class="wrapper">
            <div class="child-holder">
                <div class="child"></div>
            </div>
            <div class="child-holder">
                <div class="child"></div>
            </div>
            <div class="child-holder">
                <div class="child"></div>
            </div>
            <div class="child-holder">
                <div class="child"></div>
            </div>
        </div>
    </div>

CSS

    

    /* 20px value everywhere except height is related to width of the item */
    .parent {
        margin-left: 20px;
    }
    .wrapper {
        width: 100%;
        table-layout: fixed;
        display: table;
        background-color: cornflowerblue;
    }
    .child-holder {
        display: table-cell;
        vertical-align: top;
    }
    .child-holder:last-child {
        width: 0px;
    }
    .child {
        width: 20px;
        height: 20px;
        background-color: black;
        margin-left: -20px;
    }

JSFIDDLE

If you want to add more items, copy the below code and append it to the .parent element in the fiddle

      <div class="child-holder">
          <div class="child"></div>
      </div>