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

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Almost, how to complete centering buttons in flexbox.

First I reviewed absolute en relative positioning and centered the buttons a bit. But it is easier to do with flexbox. So I gave the buttons a flex container by using

button1,
button2 {
  display: flex;
}

After that I tried to target the buttons with:

button1,
button2 {
  align-items: center;
}

Maybe I am targeting the flex container now with align-items which is not possible. What do I have to do to center both buttons?

https://w.trhou.se/spzengk34q

4 Answers

Erik Krieg
Erik Krieg
43,038 Points
Erik Krieg
Erik Krieg
43,038 Points

display: flex; actually affects the children of the element you apply the style to, but not the element itself. This means what you would want to do is place your buttons into a container, like a div, and apply the display: flex; to that container.

Also, if you want vertical centering you will want to use align-items: center;, but if it is horizontal centering you're looking for then justify-content: center; is used. These rules would also be added to the container because, like display: flex;, they affect the immediate children of the element you apply them to.

This is my favourite reference for flexbox. I probably use it at least once each time I am implementing a layout with it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Thanks for the reference. I understand what is written there, but applying it can be a challenge. I am looking for horizontal centering and tried:

.button1,
.button2 {
  justify-content: center;
}

The place of the buttons doesn't change to the center. They also don't move with flex-end, or flex start. I also added flex-direction: row, but that didn't help either. Maybe something is interfering, but I don't know what?

https://w.trhou.se/b1od0bkqm6

Erik Krieg
Erik Krieg
43,038 Points
Erik Krieg
Erik Krieg
43,038 Points

display: flex; actually affects the children of the element you apply the style to, but not the element itself.

That is where your mistake lies, here is an example of how to get the positioning you want:

<div class="button-container">
  <button>Button A</button>
  <button>Button B</button>
</div>

.button-container {
  display: flex;
  justify-content: center;
}

And here is another example in a codepen to illustrate how it renders: http://codepen.io/Space_Erik/pen/OWpJPO

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 25,947 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 25,947 Points

Here's some great supplemental material on the basics of Flexbox — https://flexbox.io/

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

It's a good material, but I am hours further without finding the solution. I am going to look wich other separate puzzle pieces to learn about. Maybe I had to start with an easier thing to center.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Thanks for the codes Erik Krieg , but I am still looking for how to implement them.

I rebuild the page.css to this;

ButtonA { display: block; width: 180px; height: 60px; position: absolute; border: 2px solid #04a; margin-top: 80px; margin-left: 300px; border-radius: 5px; background-color: #06c; }

ButtonB { display: block; width: 180px; height: 60px; position: absolute; border: 2px solid #04a; margin-top: 80px; margin-left: 485px; border-radius: 5px; background-color: #06c; }

ButtonA .content, ButtonB .content{ display: block; position: absolute; bottom: 6px; width: 100%; height: 100%; line-height: 60px; background-color: #09f; text-align: center; color: #fff; text-transform: uppercase; box-shadow: 0 6px 0 #06c; border-radius: 5px; transition: all 0.1s linear; }

ButtonA:active .content, ButtonB:active .content { bottom: 0; box-shadow: 0px 0 #06c;

}

Rebuild the part in flexbox.css to

ButtonA, ButtonB { display: flex-inline; justify-content: center; flex-direction: column; }

And rebuild the part in index.html to <div class="button-container"> <button> Button A</button> <button> Button B</button> </div>

Now the buttons aren't centered they don't even look like buttons anymore :)

It's like this now https://w.trhou.se/6nht8mbcxf