0

I have span that I need to center vertically inside button Here is code of button

 <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>

Here is CSS stuff

    .answer-button {
  color: white;
  margin-top: 34px;
  background: $default-button;
  border-radius: 4px;
  text-align: center;;
  width: 350px;
  height: 50px;
  border: none;
  -webkit-box-shadow: 0px 0px 10px 8px rgba(245, 187, 145, 0.4);
  -moz-box-shadow: 0px 0px 10px 8px rgba(245, 187, 145, 0.4);
  box-shadow: 0px 0px 10px 8px rgba(245, 187, 145, 0.4);
}

and <span> css

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

at buttons with small words all okay

enter image description here

But with large amount of words it's not centered

enter image description here

How I can fix this?

Eugene Sukh
  • 2,357
  • 4
  • 42
  • 86
  • 1
    Please provdie a working example. You can use flexbox to do this, or position absolute for the span... there are some solution for your problem, but with a working example can be more simple helping you – Sfili_81 Oct 12 '20 at 06:39

1 Answers1

3

.answer-button {
  display: flex;
  align-items: center;
  background: #CCC;
  border-radius: 10px;
  text-align: center;;
  width: 350px;
  height: 50px;
  border: none;
}

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

.text-area {
  width: 100%;
}
<div>
  <button mat-raised-button class="answer-button">
    <span class="dot" >AA</span>
    <div class="text-area">
      This is a very very very very very very very very very very very very very very very long text.
    </div>
          
  </button>
</div

For this, you can make an arrangement as follows.

.answer-button {
  display: flex;
  align-items: center;
}

.dot {
  line-height: 25px;
}

.text-area {
  width: 100%;
}

Edit 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 class="dot" >{{ getLetterByIndex(i) }}</span>
           <div class="text-area">
            {{ item.answerValue }}
          </div>
          
        </button>
</div>
HyopeR
  • 387
  • 2
  • 11