在页脚中居中两个 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

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

试试这个！

Answer 2

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

Answer 3

对页脚的内部元素应用 padding。删除页脚中的height。

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

最简单的方法是在页脚中添加填充顶部。

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

Answer 5

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

在页脚中居中两个 div

Centering two divs in a footer

html

css

alignment

footer