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

Question

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

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

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

我创建了一个小 fiddle 显示我所在的位置 - 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>.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

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;
}

Answer 2

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

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

CSS to center vertically four divs side by side inside a wrapper div

css

vertical-alignment

非 flexbox 解决方案：