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 Maleeha Naqvi
Maleeha Naqvi
257 Points

3 h1 elements in one line? aligned on corners and centered

How can I left align, right align and center three h1 texts in one line?

I have been able to left align and right align but when i center a third text, everything slips in separate lines? Thanks.

This is what I have so far (line 5 (centering)is what throws it off):

html> <body> <header> <h1 style="text-align:left;float:left;">Title</h1> <h1 style="text-align:center;float:center;">MyPage</h1> <h1 style="text-align:right;float:right;">Context</h1> <hr style="clear:both;"/> </header> </body>

</html>

2 Answers

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

The reason H1 elements appear on different lines is because they're block elements by default. Block elements take up the entire width of the page and push the rest of the content out of the way. To change this behavior, you'll want to change their display property into an inline-block value.

See here -

h1 {
    display: inline-block;
}

This should allow them to display on the same line as other inline elements.

Maleeha Naqvi
Maleeha Naqvi
257 Points

Hey,

Thank you for the response. It worked ! :) It would still not let me center the text though. I get the '1st test' and '2nd text' on left and the 'third text' on the right. Any clue what I might be doing wrong ? Also, It doesnt work if I do not use float.

Jeff Lemay
Jeff Lemay
14,268 Points

On the element containing the three h3's, set text-align:center.

To have them vertically center, set vertical-align:center on the h3's along with the inline-block code above.

onuniku
onuniku
5,394 Points
onuniku
onuniku
5,394 Points

<style> body { width: 100%; margin: 0; }

  h1 {
    display: inline-block;
    margin: 2.25%;
    width: 28.3333%;
  }

</style>