CSS如何对齐框和描述？

Question

我是ASP.Net CSS的新手。 任何人都可以告诉我如何将我的盒子与其描述（color_box）和向下（描述）对齐。

这是我当前的问题图片。 My CSS image

我的Html代码如下：

<div class="container-box">
<div class="box blue">
    <div class="text blue">Blue</div>
</div>
<div class="box black">
    <div class="text black">Black</div>
</div>
<div class="box green">
    <div class="text green">Green</div>
</div>
</div>

我的CSS代码如下：

＆＃13;

＆＃13;

.container-box{
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 40px;
    padding-right: 50px;
    padding-bottom: 350px;
    padding-left: 80px;

}
.box{
  float: left;
  width: 20px;
  height: 100px;
  margin: 10px;
  margin-left:0.01%;
  border: 80px solid rgba(0, 0, 0, .2);
  

}

.blue{
    background:blue;
    
}

.black{
    background:black;
}

.green{
    background:green;
}


.text{
    float: left;
    width: 320px;
    padding: 10px;
    border: 5px solid dotted;
    margin:100px;
    margin-right:100%;
    color:white;
}

＆＃13;

 <div class="container-box">
    <div class="box blue">
        <div class="text blue">Blue</div>
    </div>
    <div class="box black">
        <div class="text black">Black</div>
    </div>
    <div class="box green">
        <div class="text green">Green</div>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

纠正我或请为我提供一些解决方案。 谢谢。