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 Robbie Singh
Robbie Singh
3,675 Points

What is the best way to center my content on all of my pages?

Codepen link: http://codepen.io/robbiegsingh/pen/NPMrGB

Treehouse link: http://port-80-xx2t3h6fof.treehouse-app.com/index.html

2 Answers

pi R
pi R
12,720 Points
pi R
pi R
12,720 Points

Hi Robbie ! I'm a beginner but I tried to modify your code to find a solution. I think you should target your body element, use the property text-align: center, and then be carefull about the padding on your differents elements. ( Like on your ul list, each links have 30px left padding, the h2 elements have 50px right padding .. etc)

And if you want to center your elements, use the property margin: auto (works only if you have defined a width).

I hope this will help you !

Robbie Singh
Robbie Singh
3,675 Points

Thank you so much. After hacking at it in many different ways, my mental energy took a nosedive. Thanks for the boost!

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Great answer pi R, I'll just add that it may be better in the long run to use a div that wraps all of the content you want to center, instead of centering everything within the body element. This will give you the flexibility to add things to the body element without being centered. Also, I moved the footer to inside the body tag, at the bottom (was previously outside).

Codepen

Robbie Singh
Robbie Singh
3,675 Points

Thanks for evaluating my code yet again Robert!

I tested the changes you've made and though the solution does work on the contact page, however it seems to distort the elements on all my other pages to random areas in an inconsistent manner.

As far as the wrap is concerned, I just applied from the videos. This is literally my first project as I am just trying to apply whatever I've gone over so far.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's likely because I added a div with the class .center to wrap all the content in the body to be centered - as opposed to centering everything in the body element. As a result, this will break your other pages unless you add the same div to each page.

<body>
  <div class="center">
    <!-- everything you want centered goes in here -->
  </div>
</body>

It's really up to you how to go about this. If you're certain that everything within the body element will be centered, then you don't need the wrapper I added and will need to change the style from targeting the center class to the body element.

.center {
  text-align: center;
}

/* change to */

body {
  text-align: center;
}

Cheers