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 arifbinyusuf
arifbinyusuf
901 Points

Centering Problem

<div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>number one(1) image</p>
            </a>  
          </li>
          <li>
            <a href="img.numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>number two(2) image</p>
            </a>
          </li>
           <li>
            <a href="img.numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>number two(6)image</p>
            </a>
          </li>
           <li>
            <a href="img.numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>number two(9) image</p>
            </a>
          </li>
           <li>
            <a href="img.numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>number two(12) image</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://www.facebook.com/et.net.3"><img src="img/facebook-wrap.png"></a>
        <a href="http://www.twitter.com/cashtrap"><img src="img/twitter-wrap.png"></a>
        <p>&copy; 2014 Nick Pettit</p>
      </footer>
    </div>

corresponding css =

#wrapper {
 max-width: 940px; 
 margin: 0 auto;
}

Hello guys, I am new to coding. The above html(which came after the closing header tag) and CSS was used by the the html instructor Nick pettit to center a bunch of images nested in the section element which was wrapped in a div. By my understanding, the attribute margin: 0 auto; helps to center element horizontally. And so I tried re-writing the CSS code as

#wrapper { 
 margin: 0 auto;
}

As you can see I have excluded max-width: 940px; . The wrapper did not center after I removed max-width: 940px; . Can somebody please explain why it didn't work because my thinking is that margin: 0 auto; alone should be able to do that.

Lush Sleutsky
Lush Sleutsky
14,044 Points

It is very hard to understand and help you with this question, as the formatting makes it hard to follow. Can you repost everything using the Markdown Cheatsheet, which is right below the box you use to type your question.

.wrapper {
  margin: 0 auto;
}

The above will usually work, but it's not magic, and we need more info to help you out...

And just in case you forgot to, you need to put a dot (.) before the wrapper, as it is a class, and the selector for class is a period, in the css sheet. That might be your problem...

If the wrapper is an ID, then you need to write

#wrapper {
  margin: 0 auto;
}

Remember though, that the margin trick is not magic, and won't always work, depending on what you are trying to do.

notf0und
notf0und
11,940 Points

I've edited your post so that the code displays correctly :) Here's a great post on how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum

You can also press edit and see how I've wrapped your code with backticks + language.

3 Answers

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

When you add margin:0 auto; to an item, it will cause the margins on the left and right sides to be equal, but when you don't set a max-width to that item, it can fill up the viewport, and won't be centered.

Setting a max-width will stop the div from becoming too large, this in combination with your auto margins, will center your content.

arifbinyusuf
arifbinyusuf
901 Points

thx man

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Set a position property in your CSS and make it relative.

#wrapper {
position: relative;
margin: 0 auto;
}
arifbinyusuf
arifbinyusuf
901 Points

thx man

Ricardo Hill-Henry
Ricardo Hill-Henry
38,443 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,443 Points

To use margin: 0 auto, you first need to set the width of a element you're trying to position first. This is why it worked in the first case, but not the second.

http://learnlayout.com/margin-auto.html

arifbinyusuf
arifbinyusuf
901 Points

thx man