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

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

Answer 1

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

Answer 2

If you still want to use that font you have to correct the vertical inequality with padding.
.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 7px;
font-family: 'Khula', sans-serif;
}
.form-group input {
font-family: 'Khula', sans-serif;
text-indent: 20px;
width: 100%;
font-size: 2em;
padding-top: 8px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Khula:wght#300;700&display=swap" rel="stylesheet">
<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>
<a
href="#"
class="button-early-access btn bg-dark"
>Early access</a
>
</form>