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 Luke Glazebrook
Luke Glazebrook
13,564 Points

Cannot figure out why this will not centre!

Hey guys I have recently been working on a small little project and I have been having a blast with it.

The only problem I am having is that I cannot figure out how to get the <ul> under the button to align correctly and in the centre with the other elements?

Do any of you guys have any ideas?

http://codepen.io/anon/pen/bNdpLg

Thank you to anyone who helps me out!

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi , just a little look on the view, if you noticed, you have bullets on your ul , if this is any of the use :)

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

What i also noticed, when you add a item, the item becomes the last , this means to see the first item, i would have to scroll down. Just saying in my opinion . You could make it when adding , the item goes first and the item before get pushed down.

So if you add item 1, and now you add item 2 , i think as a shopping its or anyohter list maybe, it would be nice if the item 1 get pushed down and item 2 is on top and all the way down.

If your interested , just saying : p

2 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Luke,

Do the bullet points need to line up?

If not (sorry if you've already tried this but...) adding padding-left: 0; to your #listStore style should do it:

#listStore {
list-style: square;
list-style-position: inside;
padding-left: 0;
}

If you need the bullets to line up I'll have another think.

-Rich

Luke Glazebrook
Luke Glazebrook
13,564 Points

Thank you so much Rich!

Just out of cursiosity, how did you find this solution? I spent quite a while playing with it but I couldn't figure it out.

-Luke

Rich Bagley
Rich Bagley
25,869 Points

No problem! I remembered the ul usually has some padding in the way the bullets are displayed from previous experience with a similar issue. Luckily that paid off :)

-Rich

Luke Glazebrook
Luke Glazebrook
13,564 Points

Awesome thanks for the help Rich!

What does the second line do?

Rich Bagley
Rich Bagley
25,869 Points

To be honest you should get away without having to use that line but see if it makes a difference with the padding now set to 0. I was using it to test the padding had taken full effect. Must have copied the whole block.

This article from CSS Tricks under the heading Values for list-style-position will probably demonstrate it better than I can explain it.

-Rich

Luke Glazebrook
Luke Glazebrook
13,564 Points

Alright I will give it a go! Thanks for the help Rich I really appreciate it.

I hope you are having a great day!

-Luke

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

From what I'm seeing, it actually is centering, just not in the way that you expect. I made a few changes under the list stylings of your css. Doesn't necessarily correct it, but you can see how it changes.

The way you had, the containing div was centered on the page, and then the text for the list items was centered as well, but that only effects the text, not the bullet. If you get rid of the bullets, it looks closer to being centered.

  #listarea {
            width: 50%;
            margin: 0 auto;

            }

        #listStore {
            list-style: none;
                        }

        #listStore li {
          text-align: center;
          margin: 0 auto;
        }
Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi! Thank you for your answer.

Even without the bullets though it still wasn't properly aligned! Do you know why that happened?

-Luke