Day 2 coding - cannot figure out how to center my buttons vertically

Hi guys I’m working on the portfolio project and learning a lot. I just started freecodecamp and love it.

Can anyone take a look at my code and help me vertically align my buttons on the top?

Thanks so much

No solution but some suggestions:
Here is a great summary of ways of centering things in CSS: https://css-tricks.com/centering-css-complete-guide/
I would also highly recommend getting into flexbox later; that has solved a lot of my centering nightmares.

@rgebo21 I used flexbox to center the two buttons, you can see it here: http://codepen.io/BartBucknill/pen/oBdPjo

I’m not that much further ahead than you, so not saying this is the best way to do it, but it is one way!

I also noticed that you have some CSS mixed in the HTML; its generally a lot easier to manage if you keep them separate - a file for HTML and a file for CSS.
:slight_smile:

Wow awesome! Thanks so much I’m gonna have to look up what flex container is.

Yeah I’m actually not sure what css and html style’s difference is… I kinda noticed halfway through that they seem to function the same

When you put styling in your HTML doc inside <style> tags you are just writing CSS within the HTML doc; but it is easier to manage your code if you keep your css entirely separate from HTML (e.g. you wont use any <style> tags in your HTML). An example of why this is useful is that you might have multiple pages of HTML using the same CSS stylesheet - when you update it all the pages get updated.
Sorry if you already realise this, I may have misinterpreted your last comment. The first FCC tutorials on HTML and CSS were a little confusing for me - I wasn’t quite sure what was CSS and what was HTML! :slight_smile:
I would definitely recommend checking out other resources, of which there are many; I used https://www.udacity.com/course/intro-to-html-and-css--ud304

the flex-container is just a class that I defined. It also happens to be the term used in flexbox speak; the flex container is the parent and flex items are its children. A great reference for flexbox is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Perfect! I didn’t understand the difference between CSS and HTML until you just explained it. I was confused because in the first tutorials they grouped them together so I understood that styling had to do with CSS, but didn’t really connect the dots. Thanks so much. I’m gonna read up more on flexbox