如何制作半胶囊形状内的文字？

Answer 1

您可以使用弹性框将其居中

这就是我所做的：

<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 class="bg-primary rounded-pill container">
  <p class="text-right title">
  TOTAL AMOUNT
  </p>
  <p class="text-right price">
  200
  </p>
</div>

Answer 2

这是您应该添加的样式，以使其看起来像您所描述的那样。

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

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

<div class="bg-primary rounded-pill">
  <p class="text-right">
  TOTAL AMOUNT
  </p>
  <p class="text-right">
  200
  </p>
</div>