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 Kristian Woods
Kristian Woods
23,414 Points

center content using Flexbox

Hey, I'm following along with one of the videos to create a navigation using flexbox.

This is guil's code to center a logo in the header:

<!DOCTYPE html>
<html>

    <head>
        <title>Flexbox test1</title>
        <link type="text/css" rel="stylesheet" href="main.css">
    </head>
    <body>


        <div class="container">

            <header class="main-header">
                <a class="logo" href="#">
                    <div class="block"></div>
                </a>
                <ul class="nav">
                    <li><a href="#">nav1</a></li>
                    <li><a href="#">nav2</a></li>
                    <li><a href="#">nav3</a></li>
                    <li><a href="#">nav4</a></li>
                </ul>
            </header>

        </div>
        <div class="main-content">

        </div>


    </body>

</html>

.main-header,
.nav {
    display: flex;
    flex-direction: column;
}

.main-header {
    padding-top: 2em;
}

.block {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    align-self: center;
}

.nav {
    margin-top: 1.5em;
    padding-left: 0;
    list-style: none;
}

.nav a {
    display: block;
    text-decoration: none;
    color: cornflowerblue;
    text-align: center;
    padding: .4em;
    border-bottom: 1px solid #ebecec;

}

.nav a:hover {
    color: #52bab3;;
    border-bottom-color: #52bab3;
}

Guil's code shows the logo/block - moving to the center of the header, directly above the nav. He used align-self: center - which I thought only aligned elements vertically? However, my logo stayed put, flush left of the header when I only used align-self: center. I then tried using margin: auto and that worked. Can someone tell me why?

Heres my code: 

<!DOCTYPE html>
<html>

    <head>
        <title>Flexbox test1</title>
        <link type="text/css" rel="stylesheet" href="main.css">
    </head>
    <body>


        <div class="container">

            <header class="main-header">
                <a class="logo" href="#">
                    <div class="block"></div>
                </a>
                <ul class="nav">
                    <li><a href="#">nav1</a></li>
                    <li><a href="#">nav2</a></li>
                    <li><a href="#">nav3</a></li>
                    <li><a href="#">nav4</a></li>
                </ul>
            </header>

        </div>
        <div class="main-content">

        </div>


    </body>

</html>

.main-header,
.nav {
    display: flex;
    flex-direction: column;
}

.main-header {
    padding-top: 2em;
}

.block {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
    align-self: center;
    margin: auto; /*This is where my code differs from Guil's*/
}

.nav {
    margin-top: 1.5em;
    padding-left: 0;
    list-style: none;
}

.nav a {
    display: block;
    text-decoration: none;
    color: cornflowerblue;
    text-align: center;
    padding: .4em;
    border-bottom: 1px solid #ebecec;

}

.nav a:hover {
    color: #52bab3;;
    border-bottom-color: #52bab3;
}
jsdevtom
jsdevtom
16,963 Points

I'm trying to work this out now with chrome dev tools. I'll post the answer shortly (I hope) :-)

2 Answers

jsdevtom
jsdevtom
16,963 Points

The a tag parenting the div block needs to have align-self: center;, not div block it's self. The reason for this is because the a tag parenting the div block is not a flex container and thus align-self: center; does not work on it's children.

See code pen of this working here and awesome flexbox reference that you may or may not already know about:-)

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Hey man, thank you so much! it worked :)