Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by umairbalani
umairbalani
11,390 Points

Footer alignment

Guys I'm trying to make my footer align into center but its not working. Below is my code.

footer {
  text-align: center;
}
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Are you trying to align the text in the footer or the footer itself? Also if you could provide more of your code such as the html file and css.

umairbalani
umairbalani
11,390 Points

my css code 

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}

8 Answers

umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

I'm trying to align my footer and text as well.

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}

Here is my html code

<footer>
      <a href="http://facebook.com/umair.balani"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&coyp; 2014 Umair Balani.</p>
      </footer>
umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

My html code is below

<footer>
      <a href="http://facebook.com/umair.balani"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&coyp; 2014 Umair Balani.</p>
      </footer>
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

As it stands right now it should be centered. I tried it in a code pen. This means you probably have some other css that is changing it. Please post your full html page and full css.

umairbalani
umairbalani
11,390 Points

my css code

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

This is just a snippet of code for your footer. I want to see all of your styles and your entire html page including the <!DOCTYPE html> tag.

umairbalani
umairbalani
11,390 Points

My full CSS below

/*************************
GENERAL 
**************************/
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none
}



/*************************
HEADING 
**************************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
}


/*************************
NAVIGATION 
**************************/

nav {
  text-align: center;
  padding:  10px 0;
  margin: 20px 0 0;
}

/*************************
FOOTER 
**************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}

/*************************
COLOR
**************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background:#6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background-color: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* logo colort */
a {
  color: #6ab47b;
}


/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

My full html

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>My Babywebsite | Hurry Babaywebsite</title>
      <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
   </head>
<body>
  <header>
    <a href="index.html" id="logo">    
      <h1>Umair</h1>
      <h2>Designer</h2>
      </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>      
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
    </header>
  <div id="wrapper">
      <section>
        <ul>
         <li>
          <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt="">
            <p>My first pic upload</p>
           </a>
          </li>
          <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>My second pic upload</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>My third upload</p>
            </a>
          </li>
          <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>My fourth pic upload</p>
            </a>
          </li>
          <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>My fifth pic upload</p>
            </a>
          </li>
          </ul>
      </section>
      <footer>
      <a href="http://facebook.com/umair.balani"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&coyp; 2014 Umair Balani.</p>
      </footer>
    </div>
</body>
</html>
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

None of your html tags are showing up. Nvm it is working now.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Your footer seems to be aligned to the center. Are you maybe refering to your navigation?

umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

What should I do??

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Is this what you are seeing? (Mine won't have the images you have)

umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

Nopes I'm talking about footer.

alex mattingley
alex mattingley
7,508 Points
alex mattingley
alex mattingley
7,508 Points

Only possibility is that the text-align: center is being overridden somewhere else in your code. Do you know how to use the inspect element tool in the browser?

umairbalani
umairbalani
11,390 Points
umairbalani
umairbalani
11,390 Points

inspect element??? sorry but I'm newbie into coding don't know about inspect element? Anyways I figured out that, it was because of my browser, it wasn't refreshing I booted my system and it worked for me.

Thanks for your help

alex mattingley
alex mattingley
7,508 Points
alex mattingley
alex mattingley
7,508 Points

Ha, I was a total newby just a couple of months ago, so I know that feeling :)

Try this:

Hover over element on any web page, and right click. You should get a dropdown menu, in that menu, you should see "inspect element". Click inspect element. You will see this most likely:

http://i.imgur.com/mfmpgE9.png

See the styles on the bottom right of that screenshot? You can actually manipulate those FROM the browser, meaning you do not need a stylesheet. Now the changes you make will not be permanent, but the will allow you to see what will happen if you mess with certain aspects of an elements style. Alot of developers will do this to trouble shoot issues in css and html.