I am facing an issue with centering placeholder/input text and button text vertically on my website. I used Bootstrap to create the site and utilized its input and button classes, but I couldn't figure out how to achieve vertical alignment. I tried adjusting the line-height property, but it didn't solve the problem.
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>
... // other input fields
<button type="submit" class="btn button-early-access">Submit</button>
</form>https://i.sstatic.net/vdprT.png
https://i.sstatic.net/9rsWF.png
.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%;
font-size: 2em;
}