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 Jake Nisenboim
Jake Nisenboim
3,374 Points

Centering header image

My HTML is :

    <header>
      <a href="index.html" id="logo">
        <h1>Jake Zeal</h1>
        <h2>Blog</h2>
        <h3><a href="img/TruthPactLogo6 (3).png" alt="Logo"></a>
          <img src="img/TruthPactLogo6 (3).png" alt="Logo">
        </h3>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

and CSS

/*********************************
HEADING
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}  

h2 {
  font-size: 0.75em;
  margin: -0.5px 0 0;
  font-weight: normal;
}

h3 {
  width: 90px;
  float: none;
  padding: 16px 0 0;
}

I am attempting to add a logo image underneath my name and title.

For some reason though, I am unable to get it to text-align: center; (does nothing). I assumed in any case that because it is #logo; it should bealigned in the center anyways.

Any ideas on what I can do?

Thanks !

Jacob Mishkin
Jacob Mishkin
23,118 Points

I edited your code so it was properly formatted so we can read it better.

Jacob Mishkin
Jacob Mishkin
23,118 Points

I see a couple of things going on:

  1. close your header tag.

do you want just the logo to be centered on the page or everything inside the header tag be centered as well?

Jake Nisenboim
Jake Nisenboim
3,374 Points

Sorry I didn't post all of the html as I didn't think it was necessary. I have updated it now.

Yeah, I would like to have all the headers aligned to be in the center of the page (dynamically).

Hannah Mackaness
Hannah Mackaness
4,437 Points

I'm not sure, but I don't think you can manipulate <h3> tags that don't contain text with the "text align" property? It's like you've made the container but you haven't put text in it, so it can't respond because there isn't anything to align? I might try adding it as a pure image tag instead and then manipulating it so that it was aligned in the middle of the header.

I'm really not sure though..

3 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

For the image:

h3 {
  margin: 0 auto;
  width: 90px;  
  padding: 16px 0 0;
}
Jake Nisenboim
Jake Nisenboim
3,374 Points

Thanks ! margin: 0 auto; worked !

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

okay in your header selector in your CSS just write text-align: center; 

header {
  text-align: center;
}

remove the text-align from the #logo, and you should be good to go.

Jacob Mishkin
Jacob Mishkin
23,118 Points

let me know if that doesn't work.

Jake Nisenboim
Jake Nisenboim
3,374 Points

I made those changed to the code. h1 and h2 remained the same but the image is still far to the left; not centered. Any ideas?

Thanks Jacob !

Jake Nisenboim
Jake Nisenboim
3,374 Points

Its very odd. If I change is to text-align: right; , the image still does not move. It makes me think that it is a problem with the html. What do you think?

Jacob Mishkin
Jacob Mishkin
23,118 Points

Its because you are nesting an anchor and image tags inside a h3 element. I would remove the h3 and just have the anchor and image tags. h3 is for text, I'm not sure why you have it like that.

This is a great time to learn how to use Chrome dev tools, open the inspector and if you need help using it let me know.

Hannah Mackaness
Hannah Mackaness
4,437 Points
Hannah Mackaness
Hannah Mackaness
4,437 Points

oh, maybe the closing </a> and </h3> tags need to be reversed?