CSS not centering as expected

Question

I'm trying to get this text to center in this div. I'm using react so the class name is "className"

.cartCost {
  background-color: #fffbe3;
  width: 300px;
  height: 40px;
  font-size: 24px;
  font-weight: bold;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  margin: 8px 0 5px 0;
}

.cartType {
  width: 50%;
  margin: 0 auto;
}

<div class="cartCost">
  <div class="cartType">$0.00</div>
</div>

The result is this:

The text appears to the left not centered.

you need to also center the content inside – Temani Afif Apr 20 '20 at 22:46 — Temani Afif, Apr 20 '20 at 22:46

score 1 · Accepted Answer · answered Apr 20 '20 at 22:45

Use text-align: center on your element. Otherwise the text is always left aligned by default.

.cartCost {
  background-color: #fffbe3;
  width: 300px;
  height: 40px;
  font-size: 24px;
  font-weight: bold;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  margin: 8px 0 5px 0;
  text-align: center;
}

.cartType {
  width: 50%;
  margin: 0 auto;
}

<div class="cartCost">
  <div class="cartType">$0.00</div>
</div>

CSS not centering as expected

1 Answers1