html - How to center button and placeholder's text vertically

Question

I have a problem, I used bootstrap to make a website and used its input and button classes, of course as I can see that's not the problem in bootstrap. I don't know how to center placeholder/input text and button text vertically. I read about line-height but it didn't help me.

BUTTONS:

             <a
                href="#"
                class="button-early-access btn bg-dark"
                >Early access</a
              >

INPUTS:

<form>
                  <div class="form-group">
                    <input
                      type="text"
                      class="form-control p-20 col-md-12"
                      id="firstLastName"
                      aria-describedby="firstLastNameFan"
                      placeholder="First and last name"
                    />
                  </div>

                  <div class="form-group">
                    <input
                      type="email"
                      class="form-control col-md-12"
                      id="exampleInputEmail1"
                      aria-describedby="emailHelpFan"
                      placeholder="Enter email"
                    />
                  </div>
                  <div class="form-group">
                    <input
                      type="text"
                      class="form-control"
                      id="teamFan"
                      placeholder="What is your favorite sports team?"
                    />
                  </div>
                  <div class="form-group">
                    <input
                      type="text"
                      class="form-control"
                      id="topAthlete"
                      placeholder="Name one athlete you would like to meet?"
                    />
                  </div>

                  <button type="submit" class="btn button-early-access">
                    Submit
                  </button>
                </form>

.button-early-access {
  background: linear-gradient(266.81deg, #009ebe -3.26%, #049c69 92.97%);
  border-radius: 27px;
  font-weight: bold;
  color: white;
  padding: 11px 35px;
}

  .form-group input {
    text-indent: 20px;
    width: 100%;
    /* min-width: 726px; */
    font-size: 2em;
  }

question from:https://stackoverflow.com/questions/65892742/how-to-center-button-and-placeholders-text-vertically

Answer 1

Try a different font besides Khula. That font has a lot of space for descenders, which is likely what you are seeing.