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 henriquegiuliani
henriquegiuliani
12,296 Points

Logo not centered inside <header>

I'm making a OverWatch site just for practice the CSS concepts i've got here, but something is making my logo not aligning to the <header> element.

Here's a pic: https://i.imgsafe.org/c21d5d63e0.png

The structure is: 

      <div class="logo-area">
        <!-- LOGO -->
        <a href="index.html">
          <img id="logo-header" src="img/overwatch.png" alt="OverWatch" />
        </a>
      </div>

Is it normal the <a> link to have 0 height? I guess the image is collapsing the <a> element.

john larson
john larson
16,594 Points

oops, I didn't post that correctly but.. give your div an appropriate width, whatever makes sense. Then you can use margin: auto; in the css to center it.

john larson
john larson
16,594 Points

I found the post that someone sent me, it's below. I'll take a look at your codePen now

8 Answers

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points 
.logo-area {
  width: 250px;
  margin: auto;
}
henriquegiuliani
henriquegiuliani
12,296 Points

Didn't work, buddy :/

john larson
john larson
16,594 Points

in a post below someone sent me they say that this should do it.

img {

  text-align: center;
}

there's different ways to do it. someone sent me the breakdown. Ill see if I can find it and post it here. You're probably missing some small detail. No big, you'll get it. And Most likely you will learn something from it.

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

I've made a CodePen so you can see all my code: http://codepen.io/anon/pen/dXzPxz

john larson
john larson
16,594 Points

Henrique, I went to code pen, but I didn't see anything. I'm not very familiar with code Pen though.

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

John, please try this link: https://codepen.io/henvoni/pen/NAvqGJ

Thanks a lot for the help

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points 
img{
  /* This is the default */
  display: inline;
  text-align: center;
}
img{
  display: block;
  margin: 0 auto;
}
img{
  /* This covers all your bases, and you can use either. Pick your favorite */
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}
john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

I found one thing,

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

You have the div that holds the img, floated to the left. So as far as I can tell the img will never be centered on the page because it's container (the div, the thing that the img is in on the page) will always be on the left.

henriquegiuliani
henriquegiuliani
12,296 Points

Humm, so i shouldn't contain the img inside the div in this case? Didn't understand how to fix yet hehe

john larson
john larson
16,594 Points

when I went to code pen, I could see the code but I couldn't see any preview...That would help me get a better idea of what you're doing. I'm wondering why you want to float left if you want the img centered?

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

That's strange that you can't see the result. I want the logo on the left but CENTERED VERTICALLY...

Please see the this pic: https://postimg.org/image/iqi17al8h/

As you can see, the menu on the right is centered vertically and i didn't have to do anything to center it, but the logo on the left is not centered vertically as well.

john larson
john larson
16,594 Points

I'm feeling kinda dumb right now, I went to that link and I couldn't see the project. However if you are talking about aligning something vertically, that is something different. I really have to see it somehow. Sorry I can't be of more help.

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

John, no problem. I've uploaded the project to this link so you can download if you want: https://www.dropbox.com/s/cbhirx0l2c2xcny/overwatch.zip?dl=0

Sorry taking so much of your time and thanks again.

Henrique

john larson
john larson
16,594 Points

Ok Henri, I downloaded the files and I can see your project. It has a really good feel to it. Mi lo quiero mucho:D. So your talking about the header? You want the list of names centered ? And possibly below the Logo, "Overwatch"? You tell me what you are trying to do.

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

Hahaha, thanks John! I want to center vertically the logo in the header (grey area).

john larson
john larson
16,594 Points

I think vertical align usually refers to how far something is from the top and/or bottom. Is that what you mean? Equal distance from the top and bottom of the header? Maybe take a look at this link and see if that's what you are talking about. If it is I would be happy to help you work through implementing it.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align