vertical alignment - floated element in nav bar - css

Question

I'm trying to vertically align two left and right floated elements in a nav bar. (Where the 'collapsed' nav bar has had the clearfix hack applied). The height of the navbar is determined by the left floated title (h2, 2em by default). However the right floated element, a form with input and button, doesn't sit centrally even when trying the transform approach to vertically centering items?
If I uncomment the transform vertical alignment approach it just sends form further up (not down and centred).
CodePen(https://codepen.io/yunti/pen/xdvpQK)
https://codepen.io/yunti/pen/xdvpQK
.header {
background-color: darkorange;
}
.header-title {
float: left;
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
float: right;
padding-right: 10px;
/*position: relative;*/
/*top: 50%;*/
/*transform: translateY(-50%);*/
}
.clearfix:after {
content: "";
clear: both;
display: table;
}
input,
button {
vertical-align: middle;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header clearfix">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>

Answer 1

Flexbox makes this really easy. Just add display: flex; justify-content: space-between; align-items: center; to the parent, and that will separate the elements in the parent and align them vertically.
.header {
background-color: darkorange;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.form-header {
padding-right: 10px;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>
Or if you don't want to use flexbox, you can use display: table on the parent, display: table-cell on the children in combination with vertical-align: middle
.header {
background-color: darkorange;
display: table;
width: 100%;
}
.header-title {
padding-left: 10px;
color: white;
font-weight: 400;
}
.header-title, .form-header {
vertical-align: middle;
display: table-cell;
}
.form-header {
padding-right: 10px;
text-align: right;
}
.form-control {
margin: 10px;
height: 34px;
width: 180px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 18px;
color: #555;
vertical-align: middle;
}
.form-control::placeholder {
color: grey;
}
.btn {
margin-left: 10px;
height: 34px;
padding-left: 12px;
padding-right: 12px;
line-height: 1.42857143;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 4px;
background-color: forestgreen;
font-size: 14px;
font-weight: 400;
color: white;
cursor: pointer;
vertical-align: middle;
}
<div class="header">
<h1 class="header-title">Weather App</h1>
<div class="form-header">
<form class="form-group">
<input class="form-control" type="text" placeholder="St. George, Utah" />
<button class="btn">Get Weather</button>
</form>
</div>
</div>

Answer 2

You have different amounts of margin on your H1 element ("weather app" -- 22px) and your input/button (10px). Make your margin-top the same on all of these elements.