Centering two divs in a footer - html

Question

Hi there I would need your help in vertical centering of those two elements in this footer, I would like them to be on same vertical level within footer. This is how it looks now:
footer example
This is my code:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>
Updated: I have done what VPx suggest, my code now look like this:
<div style="position: fixed; width: 100%; height: 5%; left: 0; right: 0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="display: flex; justify-content: space-between; align-items: center; height: 100%;">
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
It's hovewer still not working as it should, it now looks like this:
second example of footer after suggested changes

Answer 1

Just do it with the Flexbox:
footer {
display: flex;
justify-content: space-between; /* max. horizontal space between them */
align-items: center; /* vertical alignment / centering */
height: 100%;
}
<div style="position: fixed; width: 100%; height: 20%; left: 0; right: 0; bottom: 0; background-color: #0065A0; color: #FFFFFF;">
<footer>
<div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="margin-right: 5%;">Report</div>
</footer>
</div>
For better presentation I increased the height of the outer div to 20%.

Answer 2

Apply padding for inner elements of footer. Removeheight in footer.
<div style="position: fixed; width: 100%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer>
<div style="float:left; margin-left: 5%; padding: 20px">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%; padding: 20px">Report</div>
</footer>
</div>

Answer 3

<div style="position: fixed;width:100%;left:0;right:0;background-color:#0065A0; color: #FFFFFF;top:0;">
<footer style="height: 50px;display:table;width:100%">
<div style="text-align:left;display:table-cell;vertical-align:middle; padding: 2%;">© 2014-2017 Calgarry</div>
<div style="text-align:right; display:table-cell;vertical-align:middle; padding: 2%;">Report</div>
</footer>
</div>

Answer 4

<div class = "row">
<div class = "col-sm-6 col-sm-offset-3">
<div>© 2014-2017 Calgarry</div>
</div>
<div class = "col-sm-3">
<div>Report</div>
</div>
</div>
Try this!

Answer 5

easiest way is to add a padding top to the footer.
<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
background-color:#0065A0; color: #FFFFFF;">
<footer style="padding-top: 0.5%;" >
<div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
<div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
</footer>
</div>