How to align 2 buttons with one button having 2 lines

Question

I would like to align 2 buttons having a different number of aligns. What's the best way to align them vertically and horizontally?

.button-kyc {
  height: 70px;
  padding: 15px 25px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #2F5597;
  border: none;
  border-radius: 15px;
}

<p style="text-align:center;">
  <button class="button-kyc">
    Line1<br>
    Line2
  </button>
  <button class="button-kyc"> Line1 </button>
</p>

*different number of aligns* what does this mean? – Debsmita Paul Nov 06 '20 at 11:49 — Debsmita Paul, Nov 06 '20 at 11:49

score 0 · Accepted Answer · answered Nov 06 '20 at 11:47

Add vertical-align: top; to your button class.

.button-kyc {
  height: 70px;
  padding: 15px 25px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #2F5597;
  border: none;
  border-radius: 15px;
  vertical-align: top;
}

<p style="text-align:center;">
  <button class="button-kyc">
    Line1<br>
    Line2
  </button>
  <button class="button-kyc"> Line1 </button>
</p>

How to align 2 buttons with one button having 2 lines

1 Answers1