基于嵌套引导行中特定元素的位置垂直居中

如何解决基于嵌套引导行中特定元素的位置垂直居中

我有一系列 Bootstrap 行，每个部分一个，每个行包含一个带有带有部分标题的矩形的列，以及一系列带有关于部分元素的圆圈的列。

每个圆圈包含 3 行：一行用于元素标题，一行带有彩色分隔条（hr 标签），一行带有元素值。 (here's an image)

圆内的行根据圆的高度垂直居中。相反，我需要将元素居中，以便每个圆的分隔条对齐（请参阅图像以查看问题）。

这是单行的代码：

<div className={"row"}>
    <div className={"col-4"}>
        <div className={"my-rectangle-container-class text-center"}>
            <strong className={"my-rectangle-title-class"}>
                Section 1 title
            </strong>
            <strong className={"my-rectangle-value-class"}>
                1
            </strong>
        </div>
    </div>
    <div className={"col-4"}>
        <div className={"my-rectangle-container-class"}>
        <span className={"my-rectangle-title-class"}>
            Elem 1 short title
        </span>
            <hr style={{borderTopColor: "lightGreen"}}/>
            <strong className={"my-rectangle-value-class"}>
                1
            </strong>
        </div>
    </div>
    <div className={"col-4"}>
        <div className={"my-rectangle-container-class"}>
        <span className={"my-rectangle-title-class"}>
            Elem 2 very long title text
        </span>
            <hr style={{borderTopColor: "lightGreen"}}/>
            <strong className={"my-rectangle-value-class"}>
                0
            </strong>
        </div>
    </div>
    <div className={"col-4"}>
        <div className={"my-rectangle-container-class"}>
        <span className={"my-rectangle-title-class"}>
            Elem 3 short title
        </span>
            <hr style={{borderTopColor: "lightGreen"}}/>
            <strong className={"my-rectangle-value-class"}>
                0
            </strong>
        </div>
    </div>
</div>

这是 my-circle-container-class 的 css：

.my-circle-container-class {
    background-color: #F2F2F2;
    border-radius: 50%;
    word-break: break-word;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 105px;
    width: 105px;
}