在表格單元格中，如何設置背景色並將內容置於中間？

Question

下一張圖片是我目前所擁有的。

這應該是：

如您所見，第三列上的點未對齊。 它應該滿足下一個要求：

可以想象，由於兩個邊界，我可能會使用兩個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>

CSS代碼

.cart-item
{
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    display: table;
    height: 100%;
    overflow: hidden;
}
.cart-item>div
{
    display: table-cell;
}
.left,.center
{
    padding-bottom: 10px;
    padding-top: 10px;
}
.left
{
    padding-left: 15px;
    padding-right: 15px;
    width: 33.33%;
}
.left img
{
    max-width: 100%;
}
.center
{
    padding-right: 15px;
    text-align: left;
    vertical-align: top;
    width: auto;
}
.right
{
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    vertical-align: middle;
    width: 15px;
}
.right .grouped-dots
{
    background-color: #F5F5F5;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    display: block;
    height: 100%;
}
.cart-item .grouped-dots span::after
{
    color: #CCCCCC;
    content: '.';
    font-family: 'Open Sans',sans-serif;
    font-size: 40px;
    line-height: 0;
}

這種方法使用表格和表格單元作為顯示值。 如果您認為我走錯了路，請告訴我。

Answer 1

因為這種風格：

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

由於其高度與父代一樣高，因此沒有空間可以垂直移動到“中間”。

刪除該樣式，然后將其背景色移至.right ：

.right {
  background-color: #F5F5F5;
}

小提琴