How can I keep a button horizontally centered with an input if they have different font sizes? - css

Question

I have an input box for text and directly next to it is a button. The problem is when the button font-size and input box font-size is different, the button won't be correctly aligned.
Ex - different font-sizes. Notice the bottom of the button extends past the input box much more than the top
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Ex: Same font sizes: button is aligned:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 20px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>

Answer 1

I'm not sure this is the best solution, but you can achieve this by giving the input a height, and vertically aligning both elements to the middle. See snippet below.
input{
font-size:20px;
height: 30px;
vertical-align: middle;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
vertical-align: middle;
}
<input>
<button class="btn btn-primary m-l">Add</button>

Answer 2

Use CSS Flexbox. And apply align-items: center to make your child <div>s vertically centered. In my case I've used body as my parent element
Have a look at the snippet below:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
margin-left: 5px;
}
body {
display: flex;
align-items: center;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Hope this helps!

Answer 3

Simply wrap your content into a .container div and apply dispaly: flex to it and that should do the trick for you.
.container {
display: flex;
}
input{
font-size:20px;
margin-right: 5px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<div class="container">
<input>
<button class="btn btn-primary m-l">Add</button>
</div>
Hope helps (y).