Css 关于单个div中两个div对齐的混淆

我有一个按钮框和一个图表，应该在一个div中对齐，但它们不是，我不知道如何使它们对齐

我的按钮位于带有以下CSS的框中：

.CrewPrsntButtonsError {                             
    font-size:11px;
    width:100px;              
    height:100px;             
    color:black;             
    background:linear-gradient(to bottom, red 15%,  white 10%);            
}

<div  style="margin-top:20px;width:100%" >
      <div id="containerBtns" style="display:none;float:right;">
             <button type="button" id="btnErrorStat" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnIdle" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnService" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnLinkDn" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnDataIn" class="CrewPrsntButtonsError" ></button>
             <button type="button" id="btnrepOff" class=CrewPrsntButtonsError"></button>
             <button type="button" id="btnCrew" class="CrewPrsntButtonsError"></button>                    
      </div>
      <div id="Chart" style="float:left;width:20%;"></div>           
</div>

这是我的图表：

<div id="Chart" style="float:left;width:20%;"></div> 

考虑到所有这些：

.CrewPrsntButtonsError {                             
    font-size:11px;
    width:100px;              
    height:100px;             
    color:black;             
    background:linear-gradient(to bottom, red 15%,  white 10%);            
}

<div  style="margin-top:20px;width:100%" >
      <div id="containerBtns" style="display:none;float:right;">
             <button type="button" id="btnErrorStat" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnIdle" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnService" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnLinkDn" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnDataIn" class="CrewPrsntButtonsError" ></button>
             <button type="button" id="btnrepOff" class=CrewPrsntButtonsError"></button>
             <button type="button" id="btnCrew" class="CrewPrsntButtonsError"></button>                    
      </div>
      <div id="Chart" style="float:left;width:20%;"></div>           
</div>

有一些语法错误，例如缺少
“
。请尝试下面的示例。我希望它对您有用


.crewprsntbutonError{
字体大小：11px；
宽度：100px；
高度：100px；
颜色：黑色；
背景：线性梯度（至底部，红色15%，白色10%）；
}
.集装箱{
宽度：100%；
溢出：隐藏；
}
#集装箱{
宽度：70%；
浮动：左；
背景：红色；
}
#图表{
宽度：20%；
浮动：对；
背景：蓝色；
}

按钮
按钮
按钮
按钮
按钮
按钮
按钮
这里是图表


身体{
保证金：0；
}
.集装箱{
边缘顶部：20px；
宽度：100%
}
.分箱{
文本对齐：居中；
盒影：02px2px0RGBA（0,0,0,0.16），001pxRGBA（0,0,0,0.08）；
填充：10px；
}
.chartContainer{
浮动：左；
宽度：60%；
}
.按钮容器{
浮动：对；
宽度：30%；
}
钮扣{
背景：#DBE6F6；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#C5796D，#DBE6F6）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#C5796D，#DBE6F6）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
}
图表
按钮
按钮
按钮
按钮
按钮
按钮
按钮
您的问题不清楚。请说明您想实现什么？您面临的问题是什么？我希望这两个（图表和按钮框）在一个单独的分区中对齐，右边的方框和左边的图表我用屏幕截图更新了我的问题，如果您看到，它没有对齐