CSS在包装器div内并排垂直居中四个div

Question

我正在写一个页面来显示收据。它有以下列：

• 产品图片。
• 说明。
• 数量。
• 价格。

我为项目创建了一个 div，并为每列创建了四个 div。我无法垂直对齐列 div（因此描述、数量和价格与图像垂直居中）。

我创建了一个小小提琴来显示我在哪里 - https://jsfiddle.net/j1dias/hpg32x7b/

我以为我可以使用 display:inline-block 和 vertical-align:center，但它们似乎没有像我预期的那样工作。

我试图避免使用 flexbox。另外我宁愿不必设置高度。

请看下面的html和css。

谢谢。

HTML

<div class="checkout-item">
  <div class="checkout-item-image">
    <img src="https://picsum.photos/536/354"/>
  </div>
    <div class="checkout-item-description">
      <span>Product name</span>
    <br>
        <span>Product description</span>
    </div>
    <div class="checkout-item-qty">
        <span>2</span>
    </div>
    <div class="checkout-item-total-price">
        <span>$90.00</span>
    </div>
</div>

CSS

.checkout-cart {
    background-color: yellow;
    padding: 20px;
    margin-bottom: 50px;
    font-size: 0.9em;
}

.checkout-item {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.checkout-item-image {
    width: 15%;
    float: left;
    margin-right: 50px;
    display: inline-block;
    vertical-align: middle;
}

.checkout-item-image img {
    vertical-align: middle;
    max-width: 100%;
}

.checkout-item-description {
    width: 30%;
    float: left;
    margin-right: 50px;
    display: inline-block;
    vertical-align: middle;
}

.checkout-item-qty {
    width: 5%;
    float: left;
    margin-right: 50px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.checkout-item-total-price {
    width: 5%;
    float: left;
    font-size: 1.5em;
    font-weight: bold;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
}

编辑

我最终遵循了建议并使用了 flexbox。好像大部分浏览器都支持。

我将display:inline-block 更改为display:flexbox。

谢谢。

Answer 1

float: left 违反了你的规则。只需删除float: left。希望这对您的问题有所帮助。

Answer 2

Flexbox 正是为处理此类问题而设计的。

只需将您的.checkout-item 上的display: inline-block; 更改为：

display: flex;
flex-direction: row;
align-items: center;

display: flex explanation

flex-direction: row explanation

align-items: center explanation

非flexbox解决方案：

使用display: table 和display: table-cell 匹配列高：

.checkout-item {
    display: table;
}

.checkout-item > div {
  display: table-cell;
  float: none;
}