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
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsHaving difficulty understanding how to vertically align elements in the header.
Hi I've tried over and over again to create a header with properly centered elements .In most of the courses the logo that the instructor uses are usually text, which is easy to work with. However when the logo is an image I encounter difficulty.
Here's a link to the workspace of what I'm trying to achieve. Thanks for your help.
3 Answers
Emre Karakuz
9,162 Pointshttps://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I hope you want this:
add a rule to your css :
header > * {
vertical-align: middle;
}
Emre Karakuz
9,162 PointsThe Workspace Snapshot doesn't exist.
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsDon't know why. Here you go. http://port-80-61h34ydgob.treehouse-app.com/
Emre Karakuz
9,162 PointsI don't have your image and css files but try to use this for h1, logo.img and ul
display: inline-block; margin-top: auto; margin-bottom: auto;
Emre Karakuz
9,162 Pointsdidnt work lol :)
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsYou still can't access the workspace? I uploaded all the images.
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsSAMUEL LAWRENCE
Courses Plus Student 8,447 PointsYes that worked well. It didn't work on the main-header but I applied it to each of the children inside the parent header and it worked thanks. However, I'd like to know why in the courses, the instructors never have this issue? I also think, Guil Hernandez , Nick Pettit should do a course solely on centering. In the CSS positioning course I don't think they covered this issue of centering enough and it's a problem a lot of beginners to HTML and CSS have. I know cause while searching google and CSS stack for answers to this problem I noticed many people are having that problem. And in their course they should also use images for logos instead of text cause many people still like to use a picture logo. Thanks for your help Emre Karakuz
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsSAMUEL LAWRENCE
Courses Plus Student 8,447 PointsAlso after I used this method, two new problems surfaced. 1. This method doesn't work on floated elements. 2. The margin: 0 Auto; doesn't center the name of the website. If I float the logo img left and the nav right the name sticks to the logo. If I float it left it's still stuck to the logo image. Text align center also doesn't work. Damn it man. ahhhhh Ok let me ask you this. If you wanted to make a header like this. logo image to the left, name of the site in the middle horizontally and the navigation to the right. The logo is an image, the name of the site is an h1 and the navigation is an unordered list. how would you do it so that they are centered both horizontally and vertically?