Html 中心跨度垂直内按钮

我有一个跨度，我需要在按钮内垂直居中 这是按钮的代码

 <div *ngFor="let item of questions[arrayIndex].answers; index as i">
    <button
      mat-raised-button
      class="answer-button"
      (click)="nextQuestion(item.id, questions[arrayIndex].id)"
    >
      <!-- <span [matBadge]="getLetterByIndex(i)" matBadgeSize="large"></span> -->
      <span class="dot" >{{ getLetterByIndex(i) }}</span>
      {{ item.answerValue }}
    </button>
  </div>

和

css

   .dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-left: 12px;
  background: #fce6a6;
}

在按钮上用小词都可以

但是有大量的词，它不是居中的

我如何解决这个问题？

。应答按钮{
显示器：flex；
对齐项目：居中；
背景：#CCC；
边界半径：10px；
文本对齐：居中；；
宽度：350px；
高度：50px；
边界：无；
}
多特先生{
线高：25px；
高度：25px；
宽度：25px；
背景#fce6a6；
边界半径：50%；
显示：内联块；
浮动：左；
左边距：12px；
}
.文本区{
宽度：100%；
}

AA
这是一个非常长的文本。
请提供一个有效的例子。您可以使用flexbox来执行此操作，或者为跨度设置绝对位置。。。对于您的问题，有一些解决方案，但是通过一个工作示例可以更简单地帮助您现在我的文本在按钮中未居中这是因为它占用的空间与文本本身一样多。试着编辑一下。
   .dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  float: left;
  margin-left: 12px;
  background: #fce6a6;
}