Text not aligned at the bottom of the container

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>

have you tried this yet? https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent — Salman Malik, May 06 '22 at 10:56
you simply need to create a parent relative to container and then the child inside (i.e. ```cart-price```) to ```bottom:0;``` — Salman Malik, May 06 '22 at 10:58

score 2 · Answer 1 · answered May 06 '22 at 10:51

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>

score 0 · Answer 2 · answered May 06 '22 at 10:51

0

The price class should have

align-self: flex-end;

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

answered May 06 '22 at 10:51

Han Moe Htet

692
1
6
10

Text not aligned at the bottom of the container

2 Answers2