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

Question

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

我还将如何删除页面底部的一小部分空白？

谢谢您的帮助，代码在下面。

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

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

底部仍然有空白。

HTML

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

底部仍然有空白。

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

底部仍然有空白。

应该提到，UL和LI设置为在CSS的其他位置内联显示。

Answer 1

您可以使用align-items: center来集中您的项目，尽管我相信您也在寻找flex-direction: column以根据其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 2

“”居中“是指所有内容都水平居中，彼此下方？

如果是，则添加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，以避免大多数浏览器的默认边距。