Horizontally center few divs with different width inside one div

Question

I got problem with centering divs inside one div. In each div threre are should be the letters (username of the person).

So I got such picture

Here JSFIDDLE

Also here is the code

HTML

<div class="centered">
<div class="inner" id="first" style="margin-top: 580px;">
    <div id="mainword" class="mainfont" style="text-align:center">
        <div class="letters" id="A" style="display: block;"></div>
        <div class="letters" id="B" style="display: block;"></div>
        <div class="letters" id="C" style="display: block;"></div>
        <div class="letters" id="D" style="display: block;"></div>
        <div class="letters" id="E" style="display: block;"></div>
    </div>
</div>

CSS

.letters{
    width:30px; 
    height:50px;
    float: left;
    margin:1px;
    text-align:left;
    border: 4px solid red;
    display:inline-block;  

}

.mainfont{
    font-family: 'Cinzel', serif;
    font-size:40px;
    color:#ffffff;
    text-align: center;
    margin:1%;
}

#mainword{
    text-align:center;
    display:inline-block;
    width:100%;
    height: 30pt;
    border: 1px solid black;

}

.inner{ 
    width: 100%;
        margin: 0 auto;
}   

#A {
    /*background:url(A.png) left top; */ 
    background-repeat: no-repeat;
    background-repeat: no-repeat;  width:25px !important;
}
#B {
    /*background:url(B.png) left top;  */
    background-repeat: no-repeat; 
    width:19px !important;
 }

#C{
    /*background:url(C.png) left top;  */ 
    background-repeat: no-repeat; 
    width:10px !important; 
} 
#D{
    /*background:url(D.png) left top; */ 
    background-repeat: no-repeat; 
    width:21px !important
} 
#E{
/*  background:url(E.png) left top;  */
    background-repeat: no-repeat;
 }

How to center it? I tried text align and stuff but it seems doesn't work here

Answer 1

You can use full responsive design code. It may be help for you.

Live Working Demo

HTML Code:

<div class="main">

    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>

  </div>

CSS Code:

 .main
    {
        height:50px;
        width: 100%;
        border: 1px solid #000000;
        margin-top: 50px;
    }

    .one
    {
        height: 60px;
        width: 30px;
        border: 5px solid red;
        position: relative;
        float: left;
        margin-left: 35%;
    }
    .two
    {
        height: 60px;
        width: 25px;
        border: 5px solid red;
        position: relative;
        float: left;
        margin-left: 15px;
    }
    .three
    {
        height: 60px;
        width: 15px;
        border: 5px solid red;
        position: relative;
        float: left;
        margin-left: 15px;
    }
    .four
    {
        height: 60px;
        width: 30px;
        border: 5px solid red;
        position: relative;
        float: left;
        margin-left: 15px;
    }
    .five
    {
        height: 60px;
        width: 35px;
        border: 5px solid red;
        position: relative;
        float: left;
        margin-left: 15px;
    }

Result:

https://i.sstatic.net/a4yZC.png

Answer 2

Demo http://jsfiddle.net/6ghv3905/3/

All you need to do is apply display: inline-block; on .letters and remove display: block; and float: left; from them.