CODEWITHSUNDEEP
htmlcssfooter
Mac Hooper
Mac Hooper

Reputation: 115

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

So the little nav section is at the bottom and the other two sections are at the top of the footer.

Also how would I remove the tiny bit of white space left at the bottom of the page?

Thank you for any help, code is below.

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

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

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

Should mention that the UL and LI are set to display inline elsewhere in the css.

Upvotes: 0

Views: 164

Answers (6)

Arjun Mandloi
Arjun Mandloi

Reputation: 96

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

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

Upvotes: 0

javed
javed

Reputation: 416

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

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

Read my comments then see this:

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

Upvotes: 0

DarticCode
DarticCode

Reputation: 62

like so

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>

note you can put anything inside the center tag to center it and then the left 20 % mixed with right 20% will push it up increase the %'s to make it less wide and taller

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

You can use align-items: center to centralise your items, though I believe you're also looking for flex-direction: column to 'align' your items based on their HTML flow. This also has the effect of removing the whitespace at the bottom, as it stems from the <li>. This gives separation from the copyright, so I assume this whitespace is now intentional.

This combination can be seen in the following:

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

Upvotes: 1

Johannes
Johannes

Reputation: 67748

"In the center" meaning everything horizontally centered, below each other?

If yes, add flex-direction: column; to stack the items above each other and align-items: center; to center them horizontally:

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

Concerning whitespace (which your code doesn't recreate), you might want to add margin: 0 to body to avoid the default margin of most browsers.

Upvotes: 0

Related Questions