如何使页脚内容全部位于页脚中央？

Question

所以小导航部分在底部，另外两个部分在页脚顶部。

另外，我该如何去除页面底部留下的一小块白色 space？

感谢您的帮助，代码如下。

.footer{
 display: flex;
 justify-content: space-around;
 flex-direction: row;
 margin: 0 auto;
 align-items: center;
 background: #000000;
 color: #fff;
 margin-bottom: -25px;
}
.footer-nav a{
 font-size: 16px;
 text-decoration: none;
 color:#fff;
 position: relative;
}
.mac{
 text-decoration: none;
 color: #fff;
}

Okay so now I have it so the copyright and designed by are centered in the middle vertically but the nav buttons are still touching the bottom of the footer.

There is also still white space at the bottom.

HTML
 <div class="footer">
  <nav class='footer-nav'>
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="careers.html">Careers</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
  </nav>
  <span>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></span>
  <span>Copyright &copy Vegan Restaraunt</span>
 </div>

好的，现在我有了它，版权和设计者在垂直中间居中，但导航按钮仍然触及页脚的底部。

底部还有白色space

HTML

好的，现在我有了它，版权和设计者在垂直中间居中，但导航按钮仍然触及页脚的底部。

底部还有白色space

HTML 好的，现在我有了它，所以版权和设计者在中间垂直居中，但导航按钮仍然触及页脚的底部。

底部还有白色space

应该提到 UL 和 LI 设置为在 css 的其他地方内联显示。

Answer 1

"In the center" 意思是所有东西都水平居中，在彼此下面？

如果是，请添加 flex-direction: column; 以将项目堆叠在一起并添加 align-items: center; 以将它们水平居中：

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background: #000000;
  color: #fff;
}

.footer-nav a {
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  position: relative;
}

<div class="footer">
  <nav class='footer-nav'>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="careers.html">Careers</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <span>Website Designed by Mac Hooper</span>
  <span>Copyright &copy Vegan Restaraunt</span>
</div>

关于空格（您的代码不会重新创建），您可能需要将 margin: 0 添加到 body 以避免大多数浏览器的默认边距。

Answer 2

您可以使用 align-items: center 来集中您的项目，但我相信您也在寻找 flex-direction: column 到 'align' 您的项目基于他们的 HTML 流程。这也有去除底部空白的效果，因为它源于 <li>。这与版权分离，所以我假设这个空格是 now 故意的。

这个组合可以在下面看到：

.footer {
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  background: #000000;
  color: #fff;
  margin-bottom: -25px;
  flex-direction: column;
  align-items: center;
}

.footer-nav a {
  font-size: 16px;
  text-decoration: none;
  color: #fff;
  position: relative;
}

<div class="footer">
  <nav class='footer-nav'>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="careers.html">Careers</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <span>Website Designed by Mac Hooper</span>
  <span>Copyright &copy Vegan Restaraunt</span>
</div>

Answer 3

阅读我的评论然后看到这个：

*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
.footer{
  width:100%; background:silver; text-align:center; padding:50px;
}
nav+div{
  margin-top:7px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class='footer'>
  <nav class='footer-nav'>
    <ul>
      <li><a href='index.html'>Home</a></li>
     <li><a href='about.html'>About</a></li>
     <li><a href='careers.html'>Careers</a></li>
     <li><a href='contact.html'>Contact</a></li>
    </ul>
  </nav>
  <div>Website Designed by <a class='mac' href='https://machooper.com'>Mac Hooper</a></div>
  <div>Copyright &copy Vegan Restaraunt</div>
</div>

Answer 4

喜欢

footer{
position:fixed;
bottom:0%;
left:20%;
right:20%;

}
/*style*/
footer{
background-color:black;
color:white;
}

<footer><center><p>Copyright Company 2020 - your date </p> </center></footer>

请注意，您可以将任何东西放在中心标签内以使其居中，然后将左侧 20% 与右侧 20% 混合将其向上推，增加 % 使其成为更窄更高

Answer 5

 footer{
  position:fixed;
  bottom:0%;
  left:0%;
  right:0%;
  background-color:black;
  color:white;
}

Answer 6

.footer-nav {
        margin: 10px auto;
        float: left;
        padding: 0;
    }

.footer-nav li {
        float: left;
        padding: 0 10px;
        list-style-type: none;
    }

如何使页脚内容全部位于页脚中央？

How do I make the footer content all in the center of the footer?

html

css

footer