Right aligned button is misaligned vertically - html

Question

I have a row with header text and a button on the right.
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>
The code above is what I have currently but I have tried many variations. In all of them, the button is not vertically aligned with the text. (The image below includes the overlay when I hover over the element in the Elements pane of Chrome, in order to show vertical alignment.)
Searching existing questions on stackoverflow, I've found this question posted a number of times; however, I found no knowledgeable answers.
Has anyone figured this out?

Answer 1

This happens because the line-height of the heading and the height of the button differ.
With a line-height: 1.9; for the heading it should work:
.page-header h4 {
line-height: 1.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-header">
<div class="pull-right">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
<h4>Points Earned for Each Chapter</h4>
</div>

Answer 2

You can try using the grid to be mobile friendly and make everything inside vertically aligned.
<div class="page-header vertical-center">
<div class="row">
<div class="col-md-8">
<h1>Text on the left</h1>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success pull-right">Set All Values</button>
</div>
</div>
</div>
Add this CSS
.row > div {
border: 1px solid black;
}
.vertical-center .row {
display: flex;
align-items: center;
}
/*maybe create an id instead of h1*/
h1 {
margin: 0;
}