html - 在页脚中居中两个 div

Question

您好，我需要您帮助我将此页脚中的这两个元素垂直居中，我希望它们在页脚中处于同一垂直水平。这是它现在的样子: footer example

这是我的代码:

<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>

更新:我已经完成了 VPx 的建议，我的代码现在看起来像这样:

<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>

它仍然没有正常工作，它现在看起来像这样:

second example of footer after suggested changes

Answer 1

只需使用 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>

为了更好的呈现，我将外部 div 的 height 增加到 20%。