Как сделать так, чтобы содержимое нижнего колонтитула находилось в центре нижнего колонтитула?

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

вроде так

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%, будут pu sh, это увеличит %, чтобы сделать его менее широким и высоким

Answer 2

Вы можете использовать align-items: center для централизации ваших предметов, хотя я полагаю, что вы также ищете flex-direction: column для "выравнивания" ваших предметов на основе их потока HTML. Это также имеет эффект удаления пустого пространства внизу, так как оно вытекает из <li>. Это дает отделение от авторского права, поэтому я предполагаю, что этот пробел сейчас преднамеренный.

Эту комбинацию можно увидеть в следующем:

.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

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

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

Answer 4

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

Answer 5

Прочитайте мои комментарии, затем увидите это:

*{
  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 6

«В центре», что означает все горизонтально по центру, друг под другом?

Если да, добавьте 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, чтобы избежать отступа по умолчанию для большинства браузеров .