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

HTML

Posted by Gabriel E
Gabriel E
8,916 Points

Why isn't my footer centering like it should?

Hi everyone, I've been working on my own webpage, and encountering a slight problem. My footer CSS is set to text-align: center, as well as my <li> CSS elements. However, they do not line up at all. I will attach my CSS code so you can see what I'm doing. Thanks! The markdown completely butchered my code yet again, so please try to salvage what you can. :)

footer {
  font-size: 0.65em;
  text-align: center;
  margin-bottom: 20px;
}

#imgurs li {
    text-align: center;
    list-style-type: none;
}
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

To blockquote your code you need the three apostrophes (```) on lines by themselves and a blank line before the first set.

But to really examine what's going on, you'd need to share the HTML part also. Even better, make a snapshot of your workspace and post the link to it here.

4 Answers

David Sheridan
David Sheridan
8,579 Points

Try margin:auto; on footer.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Without seeing the HTML also this is just a guess, but perhaps the footer is contained in another element that is constraining it's horizontal dimension?

Post the rest of your code or share a snapshot if you still have a problem.

Gabriel E
Gabriel E
8,916 Points
Gabriel E
Gabriel E
8,916 Points

The margin: auto; worked fine! That's all I needed and thanks for your help. One last thing I meant to ask: If you have elements stacked on top of each other like, Element Element Element

And you want to float them side by side while maintaining the centering, what code would I use? Please keep in mind that in this disussion, the 3 elements are formatted side by side, whereas mine are one on top of the other, and I need to get them side by side. Thanks!

David Sheridan
David Sheridan
8,579 Points
David Sheridan
David Sheridan
8,579 Points

display: inline-block; should work to get them inline, while still staying centered

Gabriel E
Gabriel E
8,916 Points

The inline-block worked as I expected, but it didn't stay centered. For some reason, the text-align: center; isn't working, so I'll post my entire code and see about that. Here is the CSS for the <li> elements on the first block, and the HTML on the second:

#imgurs li {
    text-align: center;
    list-style-type: none;
    margin-right: 43px;
    display: inline-block;
}

<section id="imgurs">
        <ul>  
            <li><a href="http://imgur.com/kHSkopN">Webpage #1</a></li>
            <li><a href="http://imgur.com/ZE3iEh5">Webpage #2</a></li>
            <li><a href="http://imgur.com/WZs70Of">Webpage #3</a></li>
        </ul>
        </section>