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!

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

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

why isnt justify-content and align-items working on my .innerChildren rule?

I have a simple html document

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="parent"></div>
        <script>
            let parent=document.getElementsByClassName("parent")[0];
             //loops through creates 10 innerchild and 10 child divs then appends them
            for(let i=0; i<10;i++){
                let child=document.createElement("div");
                                let innerChild=document.createElement("div");

                child.setAttribute("class","children");//sets class of children
                innerChild.setAttribute("class","innerChildern");//sets class of innerchildren

                innerChild.innerHTML=i;// puts a number in each innerchild

                child.appendChild(innerChild);//appends innerChild to child
                parent.appendChild(child); //appends child to parent
            }
        </script>
    </body>
</html>

css stylesheet

Body{
    background-color: lightblue;
}

.parent {
    padding: 150px;
    background-color: blue;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

/*I'm trying to center the number in each child element with the class of .children*/
.children {
    justify-content: center; /** < why isnt this working?*/
    align-items: center; /** < why isnt this working?*/
    background-color: white;
    width: 50px;
    height: 50px;
}


.innerChildern {
    text-align: center;
    background-color: red;
    width: 15px;
    height: 15px;
}

/*in addition when I set margin auto, why does it only center the main axis? A div has a top and button margins, so shouldn't auto as a single thing set all four sides to auto, or does auto just set the left and right to auto?

thanks

2 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

The justify-content and align-items will need to be applied to the element that has display:flex.

The following code should work.

  .children {
    display: flex;  // Add this line
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 50px;
    height: 50px;
  }
Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

justify-content and align-items are flexbox selectors that work with the container, not the items themselves. To use them you need to apply them to the .parent div not the items.

please review the flexbox CSS selectors: flexbox