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 John Levy
John Levy
1,451 Points

How to center <h1> <h2> and <h3>?

I can center my <h1> <h2> and <h3> if that is the only part of my code but once I add the nav bar and social icons even though I have them under text-align: center they are not centered. I have attached my code. How do I keep all the headlines centered when I add other code to it? Should I still keep it as text-align: center? I also tried width 1366px which was the width of the page but that did not work either. http://codepen.io/Johned22/pen/vKzAyd Thanks in advance

6 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points 
<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title>ebookdesktop</title>
     <link rel="stylesheet" href="headline.css">
     <link rel="stylesheet" href="navbar.css">
     <link rel="stylesheet" href="socialmedia.css">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>


</head>
<body>


<ul class="social-buttons" id="demo1">
  <li>
    <a href="https://twitter.com/tvisionfitness" class="brandico-twitter-bird"></a>
  </li>
  <li>
    <a href="https://www.facebook.com/TVisionFitness/?ref=bookmarks" class="brandico-facebook"></a>
  </li>
  <li>
    <a href="https://www.instagram.com/tunnelvisionfitness" class="brandico-instagram"></a>
  <li>
    <a href="https://www.youtube.com/channel/UCsrCelr8X3mMvGhvCVZ8lyA" class="zocial-youtube"></a>
  </li>
</ul>

<img src="logo3.jpg" id="logo"/>

<div id='nav'>
    <img src="logo3.jpg" id="logo"/>
    <nav>
    <ul class="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li>
  <li><a href="indexdesktop.html">EBOOKS</a></li>
  <li><a href="apps.html">APPS</a></li>
  <li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li>
  <li><a href="contact.html">CONTACT</a></li>
   </ul>
  </nav>
   <h1>BEACH BODY ABS</h1>
    <h2>12 WEEK PROGRAM</h2>
    <h3>EBOOKS</h3>
   </div>

#logo {
  display: block;
  text-align: center;
}

#nav {
  text-align: center;
}

nav {
  display: inline-block;
}

ul {
  list-style: none;
  padding: 0;
}

h1 {  
  font-size: 50px;
  color: #847bf7;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  margin: 0px 50px 0 50px;
  padding-top: -60px;

}


  h2{  
  font-size: 50px;
  color: #847bf7;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
 text-align: center;
  margin: 0px 50px 0 50px;
  padding-top: 0px; 

 }

  h3{  
  font-size: 50px;
  color: #847bf7;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  margin: 0px 0 0;
  padding-top: 0px; 
  padding-bottom: 0px;
 }

Try that.

Look at the code and then ask questions afterwards and I'll explain.

Cheers

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your edits. I used the code you provided and it centered the heading. The issue is it caused the rest of the nav and logo to move down. Is there a way to edit it so only the heading is effected. I tried putting it in a separate divs which I have shown below but that id not work either. <div id= "header"> <h1>BEACH BODY ABS</h1> <h2>12 WEEK PROGRAM</h2> <h3>EBOOKS</h3> </div>

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I just did it by placing it in a new div. Is this method ok? This is the code I used- HTML div class="section" id="section1"> <h1>BEACH BODY ABS</h1> <h2>12 WEEK PROGRAM</h2> <h3>EBOOKS</h3> </div>

CSS

section1 {

height: 90%; 
text-align:center; 
display:table;
width:100%;

}

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Yes that will center the headers.

Why are you using 'display: table;' though? Just leave it as a block element.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Ok I will leave the display:table out it was just a example someone used to center the headers so I used it, thanks again for your help

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi John,

no problem.

For centering things it takes a while to get used to what centers and what doesn't.

Some elements will center using 'text-align: center', but there's situations this doesn't work and you'll have to use other methods to get the desired result.

'Text-align: center' will typically work on BLOCK elements which have text inside for e.g. Headers, p tags, list items, divs.

That is the TEXT will center but not the container.

For e.g.

say you do this:

<div class="container">
<div class="this-wont-center">
   <p class="text-inside-will-center">This is example text</p>
</div>
</div>

.container {
text-align: center;
}

So we have text-align:center on the outer container.

the 'this-wont-center' div will NOT center because it is a block element.

The p tag with the class 'text-inside-will-center' will also NOT center.

However, the TEXT inside the p tag WILL center.

So essentially the text centers but not the container surrounding it.

Joe