How do I make the text that is inside a half capsule shape?-CodePudding

<div >
  <p >
  TOTAL AMOUNT
  </p>
  <p >
  200
  </p>
</div>

I am expecting the output like text that contain div has capsule shape. How to do?

CodePudding user response：

You can use flex box to centerlize it

here is what I did :

<style>
.title{
  margin:0px;
  height:35px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.price{
  margin:0px;
  border-top:solid 2px white;
  width:100%;
  height:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
}

.container{
  background-color:#22B14C;

  width:300px;
  border-radius:14px;
  color:white;
}



</style>



<div >
  <p >
  TOTAL AMOUNT
  </p>
  <p >
  200
  </p>
</div>

CodePudding user response：

Here's the style you should add to make it look as you have described.

.bg-primary {
  text-align: center;
  background-color: green;
  width: 180px;
  border-radius: 4px;
}

p:not(:last-child) {
  border-bottom: 2px solid #fff;
}

<div >
  <p >
  TOTAL AMOUNT
  </p>
  <p >
  200
  </p>
</div>