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

HTML

Posted by henriquegiuliani
henriquegiuliani
12,296 Points

Please help... don't know what to do.

I've put a logo inside my <header>, but i can't center it vertically inside the <header>.

Codepen: https://codepen.io/henvoni/pen/NAvqGJ

I don't know what can i do... hehe.

Thanks in advance!

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I made some adjustments which may do the trick! Take a look:

header{
  position: relative;
  background-color: #8199A3;
  width: 100%;
  padding: 10px;
  border-bottom: 3px solid #444B54;
  margin-bottom: 50px;
}

.logo-area{
  float: left;
  width: 250px;
  margin: auto;
}

#logo-header img{
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 20%;
}

Hope this helps! :sparkles:

henriquegiuliani
henriquegiuliani
12,296 Points

Hey Jennifer... thank you for the help. I will test it out, but wasn't the image supposed to be centered vertically "automatically" just as the <nav> on the right? I have so many doubts about centering hahahaha

henriquegiuliani
henriquegiuliani
12,296 Points

Jennifer, your solution worked! One more question only: is this the most common way to place a logo in the menu bar? I'm trying to understand the changes you've made and why it works... hehe

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Henrique Giuliani I think it very well might be. Centering vertically is much more challenging than centering horizontally. But, I can't take all the credit. If you're going to be knee deep in CSS all the time, you need to learn to love this site :smiley:

https://css-tricks.com/centering-css-complete-guide/

But the general idea here, is that the image's size is not set in stone. Because it's going to depend on the device it's being rendered on. This takes the top and sets it in the middle. Then it moves up the top halfway, which results in vertical alignment regardless of the screen it's being viewed on. Experiment with making that top percent and the translateY different values and you'll see what I mean :sparkles:

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points 
Did you try to center it in the .logo-area? Should it be #logo area?
henriquegiuliani
henriquegiuliani
12,296 Points

Now looking at the code, correct me if you may, but i see no need to wrap the logo in a div... can you explain how usually logos are placed inside menus like this?

henriquegiuliani
henriquegiuliani
12,296 Points
henriquegiuliani
henriquegiuliani
12,296 Points

Thank you very much Jennifer, since i'm starting with web design everything is kinda challenging haha. But your help was outstanding, and thank you for the reference.