Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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

Hello Pierro try this :

h1 { margin-top: 30vh; }

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 ?