在一个div内水平居中几个不同宽度的div

Question

我遇到了将div放在一个div中的问题。在每个div中，应该是字母（人的用户名）。

所以我得到了这样的照片

此处JSFIDDLE

此处还有代码

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;
 }

如何居中？我试过文字对齐和东西，但似乎在这里不起作用

Answer 1

演示 http://jsfiddle.net/6ghv3905/3/

您需要做的就是在display: inline-block;上应用.letters，然后从中删除display: block;和float: left;。

Answer 2

您可以使用完整的响应式设计代码。这可能对你有帮助。

<强> Live Working Demo

HTML代码：

<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代码：

 .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;
    }

<强>结果：

http://i.stack.imgur.com/a4yZC.png