Html CSS-操纵圆

我正在开发一个angularjs应用程序，它围绕着boardgame的策划人。为了显示4个颜色钉和4个检查钉，我使用了标签，并将边框半径设置为50%。我的部门：

<div>
    <div id="pegs">
        <div ng-repeat="colour in guess.getCombination() track by $index">
            <span class="colourCircle" style="background-color:{{colour}}"></span>
        </div>
        <div id="checkPegs">
            <span class="checkCircle" ng-class="guess.getOrange()>=1?'orangePeg':guess.getOrange()+guess.getWhite()>=1?'whitePeg':'noPeg'"></span>
            <span class="checkCircle" ng-class="guess.getOrange()>=2?'orangePeg':guess.getOrange()+guess.getWhite()>=2?'whitePeg':'noPeg'"></span>
            <br />
            <span class="checkCircle" ng-class="guess.getOrange()>=3?'orangePeg':guess.getOrange()+guess.getWhite()>=3?'whitePeg':'noPeg'"></span>
            <span class="checkCircle" ng-class="guess.getOrange()>=4?'orangePeg':guess.getOrange()+guess.getWhite()>=4?'whitePeg':'noPeg'"></span>
        </div>
    </div>
</div>

目前看起来是这样的：

我试着把右边的4个小圆圈变大，垂直居中。最好的方法是什么？
我也在寻找一种方法，使整个div居中

---

此外，圆的宽度和高度现在已硬编码。有没有一种方法可以动态地设置它以便更好地扩展？

只需将peg容器上的“显示”属性更改为tabel，并显示所有子div，以显示中间垂直对齐的表格单元格。要使水平方向上的所有圆居中，只需在pegs div中添加一个边距“0 auto”。查看代码片段，您就会明白这一点

.colorCircle{
边界半径：50%；
高度：60px；
宽度：60px；
浮动：左；
保证金：2倍；
}
.方格圈{
浮动：左；
高度：18px；
宽度：18px；
保证金：2倍；
}
奥兰吉佩格先生{
边界半径：50%；
背景颜色：橙色；
}
怀特佩格先生{
边界半径：50%；
背景色：白色；
}
没有{
边界半径：50%；
边框颜色：黑色；
边框样式：实心；
边界宽度：薄；
}
#钉子{
高度：60px；
保证金：5px；
显示：表格；
保证金：0自动；
}
#pegs>div{
显示：表格单元格；
垂直对齐：中间对齐；
}

为了使圆圈居中，我认为在这种情况下，

display:flex

是更好的选择。代码很简单：

#pegs{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}

此外，我认为表格不是解决此类问题的最佳选择，因为表格是显示表格数据，而不是布局。但无论如何，你可以自由选择。您可以使用此小提琴检查结果：

---

你能发布输出的html吗？我用括号中的输出内容更新了它。希望这对你来说仍然是一个非常困惑的问题，你想做什么？你们是想把彩色的圆圈放在轮廓的圆圈里吗？那么，盯住还是不盯住？你能发布设计的截图吗？谢谢你花时间看一看。我添加了一张图片，希望能更好地说明这一点。我试着把右边的钉子（它们可以是橙色的，白色的，也可以是空的）做得更大，并且垂直居中。如果我只增加宽度和高度，它们就不再对齐了。这个中心应该是在窗口中间的整个“PEG”DIV，还是仅仅针对单个圆圈？我认为'float:left'属性可能会阻止它，但如果我更改它，跨度不会显示。我编辑我的答案，使挂钩居中。如果要更清楚地看到垂直居中，请更改主体的高度。请不要用表格来做这件事，只是一个建议，太好了。有没有办法把整个“钉”在窗户中间？我认为“float:left”属性可能会阻止它，但如果我更改它，则跨度不会显示。要使pegs div水平居中，只需在顶部和底部添加一个零的边距，并在左侧和右侧添加一个自动边距，我确实编辑了片段，请查看它。但你也可能想编辑你的问题，以免混淆其他读者。

.colourCircle{
    border-radius:50%;
    height:60px;
    width:60px;
    float:left;
    margin:2px;
}
.checkCircle{
    float:left;
    height:15px;
    width:15px;
    margin:2px;
}
.orangePeg{
    border-radius:50%;
    background-color: orange;
}
.whitePeg{
    border-radius:50%;
    background-color: white;
}
.noPeg{
    border-radius:50%;
    border-color:black;
    border-style: solid;
    border-width: thin;
}
#pegs{
    height:60px;
    margin:5px;
}

#pegs{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}