Html 在表格单元格中，如何设置背景颜色并将内容放在中间？

下一张图片是我目前拥有的

这就是我们应该做的：

如您所见，第三列上的点未对齐。它应满足下一个要求：

可以想象，由于两个边界，我可能会使用两个div

这下一个代码是我一整天都在尝试的，我不能实现把中间的点放在中间的背景颜色上（考虑到两个边框颜色）。我怎么了？我是否应该删除所有内容并通过flexbox进行更改？我会感谢你的帮助

Html代码：

You have 4 items in your cart

<article class="cart-item">
    <div class="left">
        <img src="images/item1.jpg"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">$60.00</span>
    </div>

    <div class="right">
        <div class="grouped-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</article>

---

这种方法使用表格和表格单元格作为显示值。如果你认为我走错了路，请告诉我。

这是因为这种风格：

.right .grouped-dots {
  height: 100%;
}

因为它和它的父母一样高，所以它没有空间垂直移动到“中间”

删除该样式，并将其背景色移到

。右
：

.right {
  background-color: #F5F5F5;
}

我不确定问题出在哪里。只是给专栏添加了背景色吗？六羟甲基三聚氰胺六甲醚。。。刚刚注意到我上面的演示在FF中工作，但在Chrome中不工作。我所做的就是在
中添加背景色。对
@Michael\u B正是这样，这就是我现在在chrome中寻找的。我想这是因为表显示了值，但不是真的！
.grouped dots
中的一个简单flexbox实现了以下功能：
.right {
  background-color: #F5F5F5;
}