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 Piero Borrelli
Piero Borrelli
2,864 Points

Moving title in the header of a page

After finishing the CSS basics I'm trying to create a page about New York City. For now I just have a main-header element wich contains an image of the city with the title. The problem is that I don't know how to center the title in the main-header. I can use the text-align property but that would just move the title to the top center, while I want it to be in the middle center of the main-header. 

<!DOCTYPE html>

<html>
<head><title>New York</title>
   <link rel="stylesheet" href="css/style.css">

 </head>
<body>
  <header id = "main-header">
  <h1>New York</h1>
    </header>
</body>

</html>

/* CSS Code */
* {

  box-sizing:border-box; 
  margin: 0; 

}

h1 {
  font-size: 5.625rem; 
  text-transform: uppercase; 
  font-weight:normal;  

}


#main-header {
  height: 500px; 
  background-position:center; 
  background-repeat:no-repeat; 
  background-image:url("../img/new-york.jpg"); 
  background-size:cover; 
  text-align:center; 


}

2 Answers

Nick Yoho
Nick Yoho
6,957 Points
Nick Yoho
Nick Yoho
6,957 Points

Try setting the margins for your main-header to 0 and auto

#main-header {
    margin: 0 auto;
}
Timo J.
PLUS
Timo J.
Courses Plus Student 20,919 Points
Timo J.
Timo J.
Courses Plus Student 20,919 Points

Hello Pierro try this :

h1 { margin-top: 30vh; }

Piero Borrelli
Piero Borrelli
2,864 Points

I tried to do that but the problem looks the same, whenever I try to move my h1 element the main-header picture will move down too. Any suggestions ?