文本未在容器底部对齐

Question

In this example, the price text is aligned at the top of the container, I want it to be aligned at the bottom of it, like at the baseline

 .options { margin-top: auto; background: #ffaaff; flex: 1 1 100%; display: flex; justify-content: space-between; line-height: 1; }.money { display: block; }.cart-price { display: block; }

 <div class="options"> <div class="price"> <span class="cart-price"> <span class="money">$49.50</span> </span> </div> <div> <button>Decrease</button> <span >2</span> </div> </div>

Answer 1

You can fix it by adding display: flex and align-items: end to the .price div. Read more about flexbox (and align-items ) at MDN .

.price {
    display: flex;
    align-items: end;
}

 .options { margin-top: auto; background: #ffaaff; flex: 1 1 100%; display: flex; justify-content: space-between; line-height: 1; }.money { display: block; }.cart-price { display: block; }.price { display: flex; align-items: end; }

 <div class="options"> <div class="price"> <span class="cart-price"> <span class="money">$49.50</span> </span> </div> <div> <button>Decrease</button> <span>2</span> </div> </div>

Answer 2

The price class should have

align-self: flex-end;

which will align the div with price class vertically at the end of the flex.