Html 尝试将4个图表集中在一个div中时遇到问题

我有一个页面，侧面板占据页面的

25%

和

float:left

边，另一个div和

float:right

占据页面的

75%

。在右边的div中，有4个2乘2格式的ChartJS图。出于我似乎无法理解的原因，我无法让图表在div的中心对齐，或者让它们伸展以使用整个div，而不仅仅是左侧的70%。我尝试过不同的浮动、文本对齐、宽度和填充，但似乎都不正确

<div class="dashboards">
    <div id="chartsId" class="row">
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
    </div>
</div>

.dashboards {
    margin: 0;
    border: 1px solid red;
    display: table;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}

.仪表盘{
保证金：0；
边框：1px纯红；
显示：表格；
宽度：100%；
表布局：固定；
文本对齐：居中；
}

好的，如果您使用的是引导，那么我认为您的问题在于列计数

Bootstrap使用12列布局，每行使用10列（我说“每行”，因为有5*4=20列已解析为两个10x10行）

相反，请尝试两个

行

s，除非您希望在桌面上使用一行布局或类似的布局，否则这两个行可以工作。这将看起来像：

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

通过引入单列偏移，您将使列居中，如下所示：

| |x|x|x|x|x|y|y|y|y| |

您只需将

.offset-sm-1

添加到列中，如下所示：

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

---

你应该有漂亮的居中图表。

下面的设计适合你的问题吗？这里的一种简单方法是使用具有定义的高度和宽度的浮动元素

下面是一个工作片段和一个模拟您的设计的屏幕截图（左侧和面板），作为视觉证明

#根{
显示器：flex；
调整内容：灵活启动；
}
#左面板，
#右面板{
最小高度：100%；
框大小：边框框；
/*在尺寸标注中包括边框的步骤*/
}
#左面板{
宽度：25%；
背景：黑色；
颜色：白色；
}
#右面板{
宽度：75%；
背景：#f0f0ff；
}
.仪表盘{
宽度：100%；
保证金：0；
边框：1px纯红；
框大小：边框框；
/*在尺寸标注中包括边框的步骤*/
}
.行{
保证金：自动；
/*定义宽度和高度，以便定义“col-sm-5”类*/
/*相对于他们来说*/
宽度：400px；
高度：400px；
框大小：边框框；
/*在尺寸标注中包括边框的步骤*/
边框：5px实心暗绿色；
背景：#f0；
}
.col-sm-5{
/*使用浮动定位*/
浮动：左；
宽度：50%；
身高：50%；
框大小：边框框；
/*在尺寸标注中包括边框的步骤*/
边框：2倍实心深蓝色；
}

左面板
右面板

您发布的代码中有一个输入错误：

为清楚起见，
仪表板是否为浮动类：
占页面75%的空间？另外，您是否使用引导？：）谢谢@Frish，对你的第二个问题是的，是的：）嗨@Frish，刚刚尝试了这个，运气不好。不管出于什么原因，这看起来还是一样的。不过，感谢12布局的改进，我对这一点很陌生，你可能会知道，这至少是一个很好的解决方案，只需将其更新为
col-sm-6
是的，有时最好保持简单：）因此，这似乎更适合@amesshel，但是边界仍然存在一个问题：4px实心暗绿色--由于某些原因，图表仍然没有完全居中，因为绿色边框向右侧延伸了约20%，因此同样的问题似乎仍然存在。@Neemaximo，在这里（Firefox 60.2.x），绿色边框对称地围绕着四个图表（上、下、左、右），整个图表都居中。你用什么浏览器？（当然，这里的边框只是为了展示设计。）我使用的是Chrome（最新版本）。我提到了边界，因为这就是我如何判断这个问题仍然存在的原因，因为绿色边界不是对称的，因为它向右侧延伸，而图表是对称的not@Neemaximo，查看更新（屏幕截图+左右面板）。它在浏览器中的工作方式是否相同？
<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>